javascript - 如何确保点击功能只执行一次

Question

当用户点击 .class或 #id , 对两个 div 的 css 和 #id 的值进行了一些更改增加 1。但是，当用户单击其中一个 div 时，更改应该只进行一次 - 如果用户再次单击，除非刷新页面，否则什么也不会发生。

$('.class, #id').one('click', function(e) {
   $('.class, #id').css({
   'background-color' : 'rgb(232,69,73)',
   'color' : '#fff',
   });
 $("#id").html(function(i, val) { return val*1+1 });
 });

上面显示了我正在使用的代码。如您所见，我使用了 .one以确保代码只执行一次。这可行，但问题是用户可以单击 .class然后点击 #div这意味着代码可以执行两次。

我将如何编辑它以便代码只能执行一次 - 单击一个 div 意味着无法单击另一个 div。

Answer 1

您可以在两个对象上设置一个数据属性，如果没有设置则只增加计数器:

$('.class, #id').one('click', function(e) {
   if (!$(this).data("valueSet")) {
       $('.class, #id').css({
           'background-color' : 'rgb(232,69,73)',
           'color' : '#fff'
       }).data("valueSet", true);
       $("#id").html(function(i, val) { return val*1+1 });
    }
 });

或者，如果您知道没有其他要保留的 jQuery 点击处理程序，您可以从两个对象中取消绑定(bind)所有 jQuery 点击处理程序:

$('.class, #id').one('click', function(e) {
    $('.class, #id').off("click").css({
        'background-color' : 'rgb(232,69,73)',
        'color' : '#fff'
    })
    $("#id").html(function(i, val) { return val*1+1 });
 });

或者，您可以通过将事件处理程序放在命名函数中来仅取消绑定(bind)此特定事件处理程序:

function oneClick(e) {
    $('.class, #id').off("click", oneClick).css({
        'background-color' : 'rgb(232,69,73)',
        'color' : '#fff'
    })
    $("#id").html(function(i, val) { return val*1+1 });
}

$('.class, #id').one('click', oneClick);

---

一个更通用的方案会创建一个只执行一次操作的自定义函数:

function oneAction(fn) {
     var calledYet = false;
     return function() {
          if (!calledYet) {
              calledYet = true;
              return fn.apply(this, arguments);
          }
     }
 }

然后，你可以使用这个:

$('.class, #id').one('click', oneAction(function(e) {
    // this will only ever be executed once
    $('.class, #id').css({
        'background-color' : 'rgb(232,69,73)',
        'color' : '#fff'
    })
    $("#id").html(function(i, val) { return val*1+1 });
}));