阻止数组被覆盖或多次调用

Stop array from being overwritten or called multiple times

本文关键字：调用 覆盖 数组      更新时间：2023-12-26

我正在尝试从数组中删除项，我已经成功地删除了这些项，但没有得到所需的结果。每次单击具有唯一id的div时，它都应该从数组squaresNotClicked中删除该唯一id，当我输出到console时，我希望它向我显示一次数组，而不是重复它自己。我已经包含了我的代码和下面的输出。

  $("#board").on("click", ".boardSquares:not('.clicked')", function( event ) {
      $(this).addClass('clicked');
      var squaresNotClicked = ['1', '2', '3', '4', '5', '6', '7', '8' ,'9'];
      var squaresClicked = new Object();
      var square = event.target.id;
      if(this.className != 'clicked') {
          var removeSquare = "" + square + "" ;
          $(this).prepend('<img class="theImg" src="images/X.png" />');
          squaresClicked[square] = '1' ;
          squaresNotClicked = jQuery.grep(squaresNotClicked, function(value) {
          return value != removeSquare;
        });
      }
      function checkArray() {
        jQuery.each( squaresClicked, function(i, val) {
            console.log(squaresClicked);
        });
      }
      $("body").dblclick(function() {
          checkArray();
          console.log(squaresNotClicked);
      });
    });

在这个示例输出中，我单击了正方形2和3，然后双击将数组的内容输出到控制台。我知道数组每次都会被重新分配起始值。

Object {2: "1"}
["1", "3", "4", "5", "6", "7", "8", "9"]
Object {3: "1"}
["1", "2", "4", "5", "6", "7", "8", "9"]

如果我将创建数组var squaresNotClicked的行移到此函数的范围之外，并再次单击正方形2和3，我将得到输出：

Object {2: "1"}
["1", "4", "5", "6", "7", "8", "9"]
Object {3: "1"}
["1", "4", "5", "6", "7", "8", "9"]

这接近于我想要的，但无论我点击一个正方形多少次，它都会继续将数组输出到控制台。如果我点击方块1、2、3，它会将数组输出到控制台3次。如何防止这种情况发生？

实际上它没有被覆盖，应该说只使用了一次。请记住，每次单击正方形时，都会一次又一次地调用整个事件处理程序。把所有不需要重新定义的东西都放在它之外。这里有一个小帮助（没有测试，我让你自己检查）：

var squaresNotClicked = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
var squaresClicked = new Object();
$("#board").on("click", ".boardSquares:not('.clicked')", function (event) {
    $(this).addClass('clicked');
    var square = event.target.id;
    if (this.className != 'clicked') {
        var removeSquare = "" + square + "";
        $(this).prepend('<img class="theImg" src="images/X.png" />');
        squaresClicked[square] = '1';
        squaresNotClicked = jQuery.grep(squaresNotClicked, function (value) {
            return value != removeSquare;
        });
    }
});
function checkArray() {
    jQuery.each(squaresClicked, function (i, val) {
        console.log(squaresClicked);
    });
}
$("body").dblclick(function () {
    checkArray();
    console.log(squaresNotClicked);
});

为了防止在控制台中多次显示结果，请将以下代码放在点击处理程序之外：

$("body").dblclick(function() {
    checkArray();
    console.log(squaresNotClicked);
});

单击.boardSquares后，将在主体上附加一个新的侦听器。

更改正文可复制点击事件：

$("body").dblclick(function() {
    console.log(squaresNotClicked);
});

此外，将其移出"主"点击事件之外！

相关文章：