javascript - 检测 div 是否具有通过单击添加的某个类（不刷新）

Question

我正在检测没有特定类（class =“off”）的 div 上的点击，并且在函数结束时，设置了一个 cookie，该 cookie 会触发一些 php 代码在刷新页面后添加类“off”，等等之后单击并刷新页面，该功能的操作不再适用于该特定 div。到目前为止一切都很好...

我遇到的问题是我希望该功能停止在任何已单击的 div 上工作，而无需刷新页面。我尝试在函数末尾使用 .addClass 添加类，但即使现在单击 div 时它确实可以工作并添加“关闭”类，但如果再次单击，该函数仍然适用于 div，我感觉它没有检测到对原始 html 代码的更改。

如何让它一键停止工作？

$('#example').not('.off').click(function() {
// do stuff
$('#example').addClass('off');
}

多谢你们。

Answer 1

改为使用$(this)。

$('#example').not('.off').click(function() {
    $(this).addClass('off');
});

或者如果你想触发一个事件一次使用one

$('#example').one('click', function() {
    // this code will be executed once per element
});

Answer 2

绑定在元素上的处理程序不能仅通过删除类来删除。您还需要取消绑定处理程序

$('#example').not('.off').on('click', function() {
    // do stuff
    $('#example').addClass('off');
    //remove the event handler
    $('#example').off('click');
}

另一种解决方案是您可以通过以下方式检查 div 是否已经具有该类

if($('#example').hasClass("off"))
{
    return;
}

这是一个替代解决方案。我称之为快速修复。

Answer 3

不使用其他类并简单地删除事件处理程序怎么样.off

$('#example').click(function() {
  $(this).off('click');
});