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点击处理程序，您可以取消绑定来自两个对象的所有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 });
 });

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

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

Answer 2

事实上，你正在设置两个听众。一个位于.class，另一个位于#id。

这意味着您需要存储状态变量并在执行任何操作之前进行检查。

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

这比向实际DOM元素添加state属性更好。

Answer 3

我认为您可以使用事件委派代替。这样你就可以为所有目标设置一个处理程序，jQuery会在调用后自动删除它。

＆＃13;

$(document).one('click', '#first,#second', alert.bind(null, 'clicked'));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first">first</button>
<button id="second">second</button>

＆＃13;

使用您的代码：

$(document).one('click', '.class, #id', function(e) {
    //handle click
});

这是另一个示例，说明如何使用命名函数表达式以安全的方式手动删除处理程序（不影响其他处理程序）：

＆＃13;

$('#first, #second').click(function someClickHandler(e) {
  alert('clicked!');
  
  $('#first, #second').off('click', someClickHandler);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="first">First</button>
<button id="second">Second</button>

＆＃13;

如何确保单击功能仅执行一次

3 个答案: