防止數組被覆蓋或多次調用

Question

我正在嘗試從成功完成的數組中刪除項目，但未獲得期望的結果。 每次單擊具有唯一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， var squaresNotClicked得到以下結果：

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

這接近我想要的，但是無論我單擊一個正方形多少次，它都會繼續將陣列輸出到控制台。 如果單擊正方形1、2、3，它將把數組輸出到控制台3次。 如何防止這種情況發生？

Answer 1

為了防止在控制台中多次顯示結果，請將以下代碼放在點擊處理程序之外：

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

單擊.boardSquares ，將新的偵聽器附加到主體。

Answer 2

它實際上並沒有被覆蓋，您應該說只使用了一次。 請記住，每次單擊正方形時，都會一次又一次調用整個事件處理程序。 將不需要重新定義的所有內容放在外部。 這里有一些幫助（未經測試，我讓您自己檢查）：

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

Answer 3

更改主體Dubble Click事件：

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

另外，將Moveit置於“主要”點擊事件之外！