即使我已经通过事件对其进行了更改，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”的background-color属性现在具有值“ rgb（0，128，0）。但是，当我单击该正方形以触发test（）函数时，它说它具有值rgb（255， 255，255）。为什么会这样？

Answer 1

jQuery css方法的文档说明了（重点是我）：

获取匹配元素集中第一个元素的计算样式属性的值[...]

尽管a6是.white_square ，但它不是第一个。 在这里，您实际上只检查第一个的背景色：

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

以及随后的alert 。

通过选择单击的正方形来解决此问题：

$(this).css("background-color")

要么：

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