切换/添加/删除Jquery中的类无法正常工作

Question

In my code i have two boxes, i want when i click on the box it should gain some width and when i click on another box it should gain the width and remove the extra width from previous box. I have done this successfully but when i click the extra width box again it does not removing it's extra width.

 $('.dos').click(function() { $(this).toggleClass('clicked'); }); $('.dos').click(function() { $('.dos').removeClass('clicked'); $(this).addClass('clicked'); }); 

 #box { width: 100px; height: 100px; border: 1px solid #ccc; transition: width 1s; } #box.clicked { width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" class="dos"></div> <div id="box" class="dos"></div> 

Just want toggle class should also work with addClass and removeClass

( Demo on jsfiddle.net )

Answer 1

Check the updated fiddle and try

$(this).toggleClass('clicked').siblings().removeClass('clicked');   

Demo

 $('.dos').click(function() { $(this).toggleClass('clicked').siblings().removeClass('clicked'); }); 

 #box { width: 100px; height: 100px; border: 1px solid #ccc; transition: width 1s; } #box.clicked { width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="box" class="dos"></div> <div id="box" class="dos"></div> 

Answer 2

You don't need to play with adding/removing classes. Here is the new fiddle
Edit your jQuery code with this, I have just added a boolean variable:

var toggle = false;
$('.dos').click(function() { 
toggle = !toggle;
if (toggle) {
    $(this).toggleClass('clicked');
}

});
$('.dos').click(function() {
toggle = !toggle;
if (toggle) {
   $('.dos').removeClass('clicked');
    $(this).addClass('clicked');
    }
});

Answer 3

You are removing the class from the clicked button as well, if you want to achieve it you'll need to ignore the one clicked while removing the class

$('.dos').click(function() {
   $('.dos').not(this).removeClass('clicked');
   $(this).toggleClass('clicked');
});

Answer 4

Solution is as below:

You was trying to toggle already toggled div. Plus always use unique ids in your code :)

$('.dos').click(function() {

  var out = this;
   $( ".dos" ).each(function( index ,element ) {
    console.log(element);
    if($(element).attr("id") != $(out).attr("id")){

         $(this).removeClass('clicked');
    }


    });

    $(this).toggleClass('clicked');

});