通过变量引用DOM元素[重复]答案

【问题标题】：Referring to DOM element through variable [duplicate]通过变量引用DOM元素[重复]
【发布时间】：2018-08-18 19:36:17
【问题描述】：

我只是一个初学者，我不完全确定如何回答我的问题。每当我点击任何“$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 选择器？

【问题讨论】：

tldr;只有一个变量称为$newDiv。搜索“循环中的 JavaScript 变量”。
嘿，做一些研究，你会明白的。基本上 $newDiv 将引用最后一次，因为循环一直到 5 并且它具有最后一个值。
了解作用域变量的好地方developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…（最好尽可能使用const，当一些变量发生变化时let基本上可以忘记使用var）跨度>

标签： javascript jquery loops dom

【解决方案1】：

我相信这是一个作用域问题，如果您可以使用 ES6 let 而不是 var，这个问题将会得到解决。如果这不适合您，请尝试在单击处理程序中设置 $newDiv 元素的范围：

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

【讨论】：