アレイの現在の状態を記録するにはどうすればいいですか？evevt

Question

私は基本的なタイルゲームを作っています。クリックすると、forEachループがトリガされて現在の配列が更新され、勝利状態の配列と比較されます。勝利配列は不変であり、現在の配列は親divの子要素を持つinnerHTMLを表し、子が存在しない場合は値がnullです。

クリックハンドラをforEachループに移動しようとしましたが、インデックスパラメータを使用しようとしましたが、新しいforループouside forEachを貼り付けようとしましたが、クリック後に現在のpattenを取得できますループ。

let winningArrayPattern = ['0', '1', '2', null];` 
let currentArrayPattern = []; 

const classSquares = document.querySelectorAll('.square'); 

//のNodeListをchildren`in

const idParents = document.querySelectorAll('.parent'); //のNodeList

//私は親のインデックスにマップするために今、値を持っている

$('.square').click(function() { 
    currentArrayPattern = []; 
    idParents.forEach(function(item,index){ 

    if (item.children.length === 1){ 
    console.log(item.children[0].innerHTML, index);` 
    currentArrayPattern[index]= item.children[0].innerHTML;` 
    } else { 
    currentArrayPattern[index] = null; 
     console.log('parent is empty', index); 
    } 
    }); // forEach 
    console.log(currentArrayPattern, winningArrayPattern); 
    }); // click` 

私は最後の結果は勝ちの配列のインデックスになければなりません。その位置のその親divにあるものの現在の値に対応します。

いくつかの助け後

jsfiddle

codepen

Answer 1

、私たちは、私は、foreachループの上に持っていたクリックイベントハンドラは間違っていたことを発見しました。解決策は、そのクリックイベントを削除して関数内のブロックの残りの部分を設定し、その関数をjsfileの先頭にある$（document）.ready関数で呼び出します。

私の理解では、javascriptが解析されるにつれて、まずforEachループの上にあるクリックハンドラを読み込み、ドキュメントが準備できたらそのクリックイベントハンドラが表示されます。したがって、最初にDOMを完全にロードしていないため、2番目のものを最初に読み込んでいます。ここで更新されたコードです：

jsFiddle

$('document').ready(function() { 

$をクリックしてください（関数（）{

const parent = $(this).parent('div'); 
//console.log(this); 
$(this).appendTo('.empty'); 
$('.empty').addClass('full').removeClass('empty'); 
parent.addClass('empty').removeClass('full'); 
checkWin(); 

}）;（ '広場。'）。 }）;