Question

我试图将逻辑包装在函数中，以便我可以在整个项目中应用相同的函数。

以下是：

$(selector).on('click', function(){
   var hasBeenCliked = $(this).attr("has-been-clicked");
   if (hasBeenCliked === "yes") {
       return;
   }
   $(this).attr("has-been-clicked", "yes");

  //do some stuff once
});

现在，当我创建一个类似这样的函数时：

function preventTwiceClick(item){
        var hasBeenCliked = $(this).attr("has-been-clicked");
       if (hasBeenCliked === "yes") {
           return;
       }
       $(this).attr("has-been-clicked", "yes");
    }

然后在任何点击功能上多次重复使用它，它不起作用，它仍然会发射两次：

$(selector1).on('click', function(){
    preventTwiceClick(this);
    //do some stuff
});

$(selector2).on('click', function(){
    preventTwiceClick(this);
    //do some stuff
});

$(selector3).on('click', function(){
    preventTwiceClick(this);
    //do some stuff
});

非常感谢你的帮助

修改我做了你建议的人，但它没有用。以下是示例：FIDDLE

Answer 1

你在这里做错了，

尝试使用像这样的

function preventTwiceClick(this){

       if ($(this).attr("has-been-clicked") === "yes") {
           return;
       }
       $(this).attr("has-been-clicked", "yes");
    }

因为var hasBeenCliked 被覆盖

编辑：否则你可以使用一个作为@george建议

编辑2：

$('#working-test').on('click', function(){
   var hasBeenCliked = $(this).attr("has-been-clicked");
   if (hasBeenCliked === "yes") {
       return;
   }
   $(this).attr("has-been-clicked", "yes");

  alert('once');
});


function preventTwiceClick(ele){
    console.log($(ele).attr("has-been-clicked"));
       if ($(ele).attr("has-been-clicked") == "yes") {
           return true;
       }else{
           $(ele).attr("has-been-clicked", "yes");
           return false;
       }

    }

$('#not-working-test').on('click', function(){
    if(!preventTwiceClick(this)){
       alert('first time'); 
        //do your stuff here
    }
});

Answer 2

首先，您可以使用One()

在preventTwice中的第二个点击你传递项目，但是noy使用它，将其修复为

function preventTwiceClick(item){
    var hasBeenCliked = $(item).attr("has-been-clicked");
   if (hasBeenCliked === "yes") {
       return;
   }
   $(item).attr("has-been-clicked", "yes");
}

Answer 3

在整个项目中应用相同的功能

这是否意味着您希望它适用于整个网站？如果是这样，你可能最好使用cookies。你可以用javascript这样做。

document.cookie = "elementHasBeenClicked = true"

然后在你的活动中你必须用

检查你的cookie

getCookie("elementHasBeenClicked")

如果您使用的是自定义Cookie检查程序。

function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length,c.length); } return ""; }

如果您希望它基于每页，那么您商品上的简单数据属性就可以了 - 请参阅此处的数据属性http://ejohn.org/blog/html-5-data-attributes/

jQuery防止在函数内点击两次单击逻辑

3 个答案: