Question

我只是一个初学者，我不太确定该如何解决我的问题。每当我单击任何“ $ element”时，只有最后一个“ $ newDiv”会更改其颜色。

$(function () { // Document ready 
    test(document.getElementsByClassName("test-element"));
});


function test(divs) {
    var i = 0
    var l = divs.length;

    for (i; i < l; i++) {
        var $element = $(divs[i]);
        var $newDiv = $(document.createElement("div"));
        $element.after($newDiv);

        $element.click(function () {
            $newDiv.css({ backgroundColor: "red" });
        });
    }

}

如何进行调整，以使当我单击第一个“ $ element”时，只有它自己的“ $ newDiv”受到影响？有没有办法在事件处理程序中不使用DOM选择器来解决此问题？

？

Answer 1

我认为这是一个范围界定问题，如果您可以使用ES6 let而不是var，则可以解决此问题。如果那不是您的选择，请尝试在点击处理程序中设置$ newDiv元素的作用域：

$element.click(function () {
    var currentDiv = $newDiv
    currentDiv.css({ backgroundColor: "red" });
});

通过变量引用DOM元素

1 个答案: