alert（$（ "＃myHTMLElement"））は、以前にイベントで突然変異を行ったにもかかわらず、元のプロパティを表示するのはなぜですか？

Question

私はチェッカーボードを作成するはずのこの機能を持っています。

function createBoard() { 

    let strHTML = ""; 
    let alphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']; 

    for (var row = 0; row < 8; row++) { 
     strHTML += "<div>"; 
     for (var column = 0; column < 8; column++) { 
      if ((column + row) % 2 === 0) { 
       strHTML += 
     `<div class="white_square" id="${alphabets[column]}${8-row}" onclick="test()"></div>`; 
      } 
     } 

    // .... omitted some code for clarity 
}; 

ここでは、白い四角のCSS背景色を緑色に「変更」する機能があります。

$("#blackPawn").click(function() { 
    createBoard(); 
    $("#a6").css("background-color", "green"); 
    alert($("#a6").css("background-color")); 
}); 

正方形をクリックしたときに呼び出される関数です。正方形が緑色の場合、「おめでとう」のような言葉が必要です。それ以外の場合は、それが白い四角であると表示されます。

function test() { 

    if ($(".white_square").css("background-color") === "rgb(0, 128, 0)") { 
     alert("good job eric"); 
    } else { 
     var k = $(".white_square").css("background-color"); 
     alert(k); 
    } 
} 

ライン

alert($("#a6").css("background-color")); 

は "＃のA6" の背景色プロパティは、現在値が「RGB持っていることを言う（0、128、0）。しかし、私は、トリガその四角をクリックすると、テスト（）関数で、それはそれは価値のRGB（255、255、255）を持っていると言うのはなぜこのような場合は

Answer 1

jQuery css method上のドキュメントは（強調鉱山）を説明します。？

a6が.white_squareですが

[...]マッチした要素の集合内の最初の要素のための計算されたスタイルプロパティの値を取得し、それが最初のものではありません。次のalertでも

$(".white_square").css("background-color") === "rgb(0, 128, 0)" 

と：ここにいる間、あなたは本当に最初のものの背景色のみをチェックしてください。

クリック平方選択することで、この問題を解決：あなたは多分[、最小完全、かつ検証例]を作成することができます（http://stackoverflow.com/

$(ev.target).css("background-color")