jquery - toggleClass:删除当前类并添加新类

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

问题：当前类仍在其中，同时在检查器中添加了新类。

请帮忙

jsfiddles

的HTML

<div class="green">

</div>

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

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

最佳答案

我注意到您正在使用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>

关于jquery - toggleClass:删除当前类并添加新类，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56159156/

ToggleClass

jquery - toggleClass:删除当前类并添加新类