Question

var counter = -1;
var properties = [["Snack", "Meal"], ["Hot", "Cold"], ["Spicy", "Non-Spicy"], ["Vegan", "Non-Vegan"], ["Cheesy", "Non-Cheesy"], ["Creamy", "Non-Creamy"], ["Crunchy", "Non-Crunchy"]];
var button1 = $("#button1");
var button2 = $("#button2");

function letsDoThis() {
    var prop = "";
    counter++;
    console.log(counter);
    button1.html(properties[counter][0]);
    button2.html(properties[counter][1]);
    button1.on("click", function(){
        onClick(button1.html());

    });
    button2.on("click", function(){
        onClick(button2.html());
    });
}

function onClick(prop){
    prop = prop.toLowerCase();
    for (var i = 0; i < data.length; i++) {
        if (!data[i].hasOwnProperty(prop)) {
            data.splice(i, 1);
            i--;
            console.log("Removing data...");
        }
    }
    if (properties.length != 0) {
        letsDoThis();
    } else {
        letsFinishThis();
    }
}

function letsFinishThis(){

}

我知道代码是多余的，杂乱等等。

我希望计数器在每次点击时前进一次。然而，发生的是它在第一次点击时向前移动，然后向前移动两次。在第三次点击时，由于某种原因，它一直到8。一段时间以来一直令我难以置信。有什么建议吗？

PS。数据变量位于另一个文件中。

Answer 1

button2.on("click", function(){
    onClick(button2.html());
})

每次执行onClick时，它都会调用letsDoThis，这会添加另一个点击处理程序。

您希望只调用一次该代码。

调试提示：如果您在console.log中添加了onClick语句，您可能已经看到每次元素点击都会执行多次。

Answer 2

您的代码存在许多问题。我解决了标题中的问题。

$(document)ready(function(){
  var counter = 0;
  $(document).on('click','whatwver',function(){
      counter++;
      //do something
  });
});

反变量向前跳过

2 个答案: