jquery - 切换类 : Remove the Current Class and Add a New Class

Question

我有一个绿色框，并使用 toggleClass 替换为红色框。从视觉上看，颜色发生了变化，但我需要在 div 中完全删除当前类并使用 toggleClass 添加新类。

问题:当前类仍然存在，但它在检查器中添加了一个新类。

请帮忙

jsfiddles

HTML

<div class="green">

</div>

 <button id="click" value="Click">
 Click Me
 </button>

JS

$('#click').click(function() {
    $('.green').toggleClass('red');
  //$('.green').toggleClass('red green');
})

Answer 1

我注意到您正在使用 toggleClass 方法。此方法根据类的存在或状态参数的值，从匹配元素集中的每个元素添加或删除一个或多个类。

但是，您使用它的方式是错误的，在这里我将解释原因。在您的代码中，您使用了 $('.green').toggleClass('red green'); 这只会起作用一次，因为当 div 的类将从 .green 更改为 .red，不再有 div.green 元素，您的脚本将不会再次应用。

解决方法很简单，给元素定义一个ID或者应用一个辅助类就可以了。

添加一个ID

只需为div 定义一个ID，例如element-id。此解决方案将仅为此元素切换 .green 和 .red 类，如下所示:

$('#click').click(function() {
  $('#element-id').toggleClass('red green');
})

#element-id {
  height: 50px;
  width: 100px;
  margin: 25px;
}

.green {
  background: green;
}

.red {
  background: red;
}

#click {
  margin-left: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="element-id" class="green"></div>
<button id="click">Click Me</button>

辅助类

只需为 div 定义一个辅助类，例如本例中的 aux-class。优点是这可以应用于多个元素，如下所示:

$('#click').click(function() {
  $('.aux-class').toggleClass('red green');
})

.aux-class {
  height: 50px;
  width: 100px;
  margin: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px;
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.green {
  background: green;
}

.red {
  background: red;
}

#click {
  margin-left: 25px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="aux-class green">DIV 1</div>
<div class="aux-class green">DIV 2</div>
<button id="click">Click Me</button>