Question

当我点击一个按钮时，我想删除一个类并替换为其他类。我有以下HTML内容：

<div class="mainDiv-34">
   <div class="row one red"></div>
   <div class="row two red"></div>
   <div class="row three red"></div>
 </div>

我想要做的是将class="row two red"替换为class="row two green"，但第二行绿色会添加到我的mainDiv-34旁边！为什么？

这是我的JS：

$('.mainDiv-34').removeClass("row two red").addClass("row two green");

Answer 1

$('.mainDiv-34')表示您正在选择顶级div。

你需要做这样的事情：

$('.row.one.red').removeClass("row one red").addClass("row one green");

Answer 2

您没有选择正确的div。

$('.mainDiv-34 div.row.two.red').removeClass("row two red").addClass("row two green");

Answer 3

$('.mainDiv-34').find('div.two').removeClass("red").addClass("green");

Answer 4

这是因为你要删除/添加类到父div，尝试

$(".mainDiv-34").find(".row.two").removeClass("red").addClass("green")

Answer 5

您的选择器指向父div .mainDiv-34。您需要定位其子元素。

场景1 ：更改.mainDiv-34内特定元素的类。

$('.mainDiv-34 div.row.two').removeClass('red').addClass('green');

场景2 ：使用类.mainDiv-34更改row内所有元素的类。

 $('.mainDiv-34 div.row').removeClass('red').addClass('green');

场景3 ：使用类.mainDiv-34切换row内所有元素的类。

$('.mainDiv-34 div.row').click(function()
{
  $(this).toggleClass('red green');
});