jquery - jQuery 为每个具有类的元素触发一次

Question

我正在使用 jQuery：

$(".myClass").one("click", function(){
    $(this).addClass("selected");
    $("#noneselected").hide();
    alert("hidden");
});

使用此 HTML：

<p class="myClass">Click</p>
<p class="myClass">Click</p>
<p class="myClass">Click</p>

---

问题：

该函数onclick为每个触发一次.myClass。我只希望.one在第一次点击其中任何一个时为所有这些触发一次。我不能简单地使用.onand.off因为我已经有了另一个.on("click"功能。我怎样才能做到这一点？

Answer 1

.myclass在第一次单击后从所有元素中删除单击事件

$(".myClass").one("click", function(){
    $(this).addClass("selected");
    $("#noneselected").hide();
    alert("hidden");
    $(".myClass").off('click')
});

但是使用基于名称空间的点击处理程序会更安全，因为可能会有其他人注册其他点击处理程序

$(".myClass").on("click.onlyonce", function(){
    $(this).addClass("selected");
    $("#noneselected").hide();
    alert("hidden");
    $(".myClass").off('click.onlyonce')
});

演示：小提琴

Answer 2

您可以使用命名空间事件，也可以使用函数声明或命名函数表达式为事件处理程序命名：

var $elements = $(".myClass").on("click", function handler() {
    // ...
    $elements.off('click', handler);
});

Answer 3

如何存储一个隐藏变量并检查该函数是否已触发？

var handler = (function() {
    var fired = false;

    return function(){
        if (fired) return; // don't run the handler if fired is true

        fired = true;
        $(this).addClass("selected");
        $("#noneselected").hide();
        alert("hidden");
    }
}());