Question

在我的代码中我有两个盒子，我想当我点击它应该获得一些宽度，当我点击另一个盒子时，它应该获得宽度并从前一个框中删除额外的宽度。我已成功完成此操作，但当我再次单击额外宽度框时，它不会删除它的额外宽度。

$('.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>

只想切换课程也应该与addClass和removeClass

一起使用

（Demo on jsfiddle.net）

Answer 1

检查更新的fiddle并尝试

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

<强>演示

$('.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

您不需要添加/删除课程。这是new fiddle
用这个编辑你的 jQuery 代码，我刚刚添加了一个布尔变量：

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

您正在从单击的按钮中删除该类，如果您想要实现它，您将需要忽略在删除该类时单击的那个

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

Answer 4

解决方案如下：

你试图切换已经切换的div。另外，在代码中始终使用唯一ID：）

$('.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');

});

在Jquery中切换/添加/删除类不能按预期工作

4 个答案: