如何在再次单击元素时停止删除添加的类？

Question

我的页面上有尺寸样本。当我单击样本“选定”类添加到单击的样本。 如果我再次单击，则添加的类将被删除。

我想在再次单击该元素时停止删除该类。

HTML：

<div class="swatch-attribute-options clearfix">
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
</div>

Answer 1

如果删除selected 类的代码来自外部处理程序，请尝试将此代码放在您确定会在该处理程序之前运行的位置（最好在您的包含中尽可能高）。

请注意，这也会取消外部处理程序中的任何其他操作

这是一个示例，说明如何防止不受欢迎的代码运行。我包括了两个处理程序，第二个不应该作为演示你不需要的代码应该发生什么而运行。

让我知道它是否有效

$('.swatch-option').click(function(e){
  e.stopImmediatePropagation();
  $(this).addClass("selected").siblings('.swatch-option').removeClass('selected');
  alert('notice how "unwanted code" does not run');
});

$('.swatch-option').click(function(e){
  alert('unwanted code');
});

.selected{
  background: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="swatch-attribute-options clearfix">
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
<div class="swatch-option text" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>
<div class="swatch-option text selected" option-type="0" option-id="143" option-label="L" option-tooltip-thumb="" option-tooltip-value="L">L</div>
<div class="swatch-option text" option-type="0" option-id="142" option-label="XL" option-tooltip-thumb="" option-tooltip-value="XL">XL</div>

</div>

Answer 2

看起来该行为来自您正在使用的库。要覆盖该行为，只需在第一次单击后禁用 click 事件回调。但请注意，这也会禁用在您的 click 回调中定义的任何其他操作。

原始答案： （此解决方案对于 OP 将失败，因为从 cmets 中可以明显看出，click 事件在选择后具有更多句柄。请参阅底部答案的更新我的帖子） 在页面上的 javascript 末尾添加：

$(".swatch-attribute-options .swatch-option").on("click", function() {
  $(this).off("click");
});

Demo fiddle here

如果您怀疑回调中有更多事件，只需再次添加类selected。这将暂时删除选择，但几乎会立即将其添加回来，除非在处理 click 事件的插件代码中有任何耗时的活动。

$(".swatch-attribute-options .swatch-option").on("click", function() {
    $(this).addClass("selected"));
});

根据评论更新： 这应该保留唯一的最后一个选择，并且如果再次单击不会取消选择。此外，它不会阻止 click 事件中的任何后续句柄

$(".swatch-attribute-options .swatch-option").on("click", function() {
    $(this).siblings(".swatch-option").removeClass("selected");
    $(this).addClass("selected");
});

Updated Fiddle