Question

＆＃13;

$("body").on("click", ".close", function() {
  var class_test1 = 'class1 class2';
  var class_test2 = 'class1 class3';
  $('#id_test').removeClass(class_test1).addClass(class_test2);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id_test" class="class1 class2">
  test
</div>
<button class="close">
  test
</button>

＆＃13;

如果点击按钮，div#id_test应更改class1 class3上的课程，但他会更改class3 class1上的课程（课程会更改顺序）。为什么会发生这种情况并解决了问题？

P.S。：class1 class3上需要更改class1 class2 - 仅按此顺序。

Answer 1

原因如下：

有多个类与多次点击重叠。让我解释一下：

第一次单击该按钮时，类“class1”和“class2”将被删除。然后“class1”和“class3”被附加。

但是，如果单击按钮AGAIN，仅删除“class1”，使“class3”移动到第一个位置（因为没有“class2”可以删除）。然后“class1”在“class3”之后重新添加 - 产生“class3 class1”。

建议的解决方案：

$("body").on("click", ".close", function() {
  var class_test2 = 'class1 class3';
  $('#id_test').removeClass().addClass(class_test2);
});

这将删除所有类，然后按正确的顺序添加正确的类。

Answer 2

您可以使用.toggleClass()切换2，3，其中一个className字符串

＆＃13;

$("body").on("click", ".close", function() {
  var n = 3;
  $("#id_test").toggleClass(function() {
    return "class2 class" + n;
  })
});

＆＃13;

#id_test.class2 {
  color: green;
}
#id_test.class3 {
  color: blue;
}
#id_test.class2:after {
  content: attr(class);
}
#id_test.class3:after {
  content: attr(class);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="id_test" class="class1 class2">
  test
</div>
<button class="close">
  test
</button>

＆＃13;

Answer 3

试

$(".close").on("click", function() {
  $('#id_test').removeClass("class2").addClass("class3");
});

为什么课程会改变顺序？

3 个答案: