Javascript 通过变量引用DOM元素

我只是一个初学者，我不能完全确定如何从我的问题。每当我单击任何“$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" });
        });
    }

}

$（函数（）{//文档准备就绪
测试（document.getElementsByClassName（“测试元素”）；
});
功能测试（divs）{
变量i=0
var l=分段长度；
对于（i；i

---

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

我相信这是一个范围问题，如果您可以使用ES6

let

而不是

var

，这一问题就会得到解决。如果这不是您的选项，请尝试在单击处理程序中设置$newDiv元素的作用域：

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

---

太长，读不下去了只有一个变量名为

$newDiv

。搜索“循环中的JavaScript变量”。嘿，做一些搜索，你就会得到它。基本上，$newDiv将引用最后一次，因为循环一直到5，并且它有最后一个值。这是了解作用域变量的好地方（最好尽可能使用

const

，

let

当某些变量发生变化时，您基本上可以忘记使用

var

）