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

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

$（'.dos'）。单击（函数（）{
$（this.toggleClass（'clicked'）；
});
$（'.dos'）。单击（函数（）{
$（'.dos'）.removeClass（'clicked'）；
$（this.addClass（'clicked'）；
});
#框{
宽度：100px；
高度：100px；
边框：1px实心#ccc；
过渡：宽度1s；
}
#box.clicked{
宽度：200px；
}

检查更新的文件，然后重试

演示


$（'.dos'）。单击（函数（）{
$（this）.toggleClass（'clicked'）.sides（）.removeClass（'clicked'）；
});
#框{
宽度：100px；
高度：100px；
边框：1px实心#ccc；
过渡：宽度1s；
}
#box.clicked{
宽度：200px；
}

检查更新的文件，然后重试

演示


$（'.dos'）。单击（函数（）{
$（this）.toggleClass（'clicked'）.sides（）.removeClass（'clicked'）；
});
#框{
宽度：100px；
高度：100px；
边框：1px实心#ccc；
过渡：宽度1s；
}
#box.clicked{
宽度：200px；
}
您不需要添加/删除类。这是

编辑您的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');
    }
});

您不需要添加/删除类。这是

编辑您的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');
    }
});

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

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

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

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

解决方案如下：

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

解决方案如下：

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

使用
创建一个演示，这样人们就不需要检查外部LinkId了。我下次会记住它。使用
创建一个演示，这样人们就不需要检查外部LinkId了。我下次会记住它。非常感谢。非常感谢