为什么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(。但是，当我单击触发 test(( 函数的那个方块时，它说它的值为 rgb(255， 255， 255(。为什么会这样呢？

Answer 1

jQuerycss方法的文档解释(强调我的(：

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

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

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

以及随后的alert。

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

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

或：

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