CODEWITHSUNDEEP
jquery
user2247671
user2247671

Reputation: 243

select a class inside a div jquery

I have a div with some span elements inside that when I click one it turns on and all the others turn off. It works the first time ie turn on but I can't turn off, it also selects all the spans with the same id. I am pretty new to Jquery and struggling!! any pointers much appreciated

thanks Techboy

<div id="btn-grp">
        <span class="button ButtonOn">button1</span> 
        <span class="button ButtonOff">button2</span>
        <span class="button ButtonOff">button3</span>
        <span class="button ButtonOff">button4</span>
        <span class="button ButtonOff">button5</span>
</div>


<script type="text/javascript">

    $("#btn-grp").click(function(){
        $(this).addClass('ButtonOn').siblings().removeClass('ButtonOff');
    }); 

</script>

Upvotes: 1

Views: 845

Answers (3)

Roko C. Buljan
Roko C. Buljan

Reputation: 206699

Make all your buttons OFF colored by default (means don't use the .ButtonOff at all):

LIVE DEMO

<div id="btn-grp">
    <span class="button ButtonOn">button1</span> 
    <span class="button">button2</span>
    <span class="button">button3</span>
    <span class="button">button4</span>
    <span class="button">button5</span>
</div>

CSS:

.button{
  cursor:pointer;
  border-radius:5px;
  padding:4px 14px;
  margin:4px;
  display:inline-block;
  background:#ddd;
}

.ButtonOn{
  background:#cf5;
}

than just do:

$("#btn-grp .button").click(function(){
   $(this).addClass('ButtonOn').siblings().removeClass('ButtonOn');
});

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 817238

I have a div with some span elements inside that when I click one it turns on and all the others turn off.

Sounds like you want to add the ButtonOn class to the clicked element and remove it from the element which previously had it. Similarly, you want to removethe ButtonOff class from the clicked element and add it to previously "selected" element.

Your current code doesn't do this at all. It adds the ButtonOn class to the clicked element and removes the ButtonOff class from its siblings. You are never removing the ButtonOn class from any element. Furthermore, you bound the event handler to the parent of the elements. So you are actually applying the classes to the parent and the styles probably cascade down so that you get an unexpected behavior.

So, you have to add and remove both classes and bind the event handler to the right elements:

$("#btn-grp span.button").click(function(){
    $(this).siblings('.ButtonOn').add(this).toggleClass('ButtonOn ButtonOff');
});

DEMO

Depending how you want to treat clicks on an already "on" span, you might have to treat the previous element and the current element separately:

$(this).siblings().removeClass('ButtonOn').addClass('ButtonOff');
$(this).addClass('ButtonOn').removeClass('ButtonOff');

DEMO

FWIW, I would not use two classes to indicated the state of a button. I would just use one class to mark a button as "on" and have all others be styled as "off" by default.

Upvotes: 2

luk2302
luk2302

Reputation: 57214

The selector you use is not very useful for this purpose since it adds a click handler to the button group, not the buttons itself, use $(".button").click(... instead.

Then all buttons have a click-handler and the button you click gets the ButtonOn-class while all siblings will get the ButtonOff.

Upvotes: 2

Related Questions