Question

我在页面上有大小的样本。当我点击swatch＆＃34;选择＆＃34; class添加到单击的样本。如果我再次单击，则添加的类正在删除。

我想停止再次点击该元素。

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

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

原始答案： （此解决方案因OP而失败，因为评论显示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

Answer 2

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

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

这是一个如何防止不需要的代码运行的示例。我包括两个处理程序，第二个不应该运行，以演示您的不需要的代码应该发生什么。

让我知道它是否有效

＆＃13;

$('.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');
});

＆＃13;

.selected{
  background: red
}

＆＃13;

<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>

＆＃13;

如何在元素上再次点击删除添加的类？

2 个答案: