-1

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

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

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

2 回答 2

0

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

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

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

演示小提琴在这里

如果您怀疑回调中有更多事件，只需再次添加该类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");
});

更新小提琴

于 2018-03-22T12:58:45.837 回答
0

如果删除类的代码来自外部处理程序，请尝试将此代码放在您确定会在该处理程序之前运行的位置（最好在您的包含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>

于 2018-03-22T13:02:16.023 回答