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为所有人点燃一次，首先点击其中任何一个。我不能简单地使用.on和.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')
});

演示：Fiddle

Answer 2

您可以使用namespaced events或仅使用函数声明或命名函数表达式为事件处理程序命名：

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");
    }
}());

jQuery为类中的每个元素触发一次

3 个答案: