当用户单击.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。

最佳答案

您可以在两个对象上都设置一个数据属性,并且只有在未设置该属性的情况下才增加计数器:

$('.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 });
}));

关于javascript - 如何确保单击功能仅执行一次,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30551788/

10-12 12:20
查看更多