Question

我想在单击时将多个框的颜色更改为紫色。在下面的当前代码中，只有一个框在单击时变为紫色。

就您单击任意数量的框后，我尝试了许多不同的方法使其运行，该框应变为紫色，但我的所有尝试均以失败告终。

我在做什么错了？

function createBoxesDynamically() {
    var tileLength = Math.floor(Math.random() * 11);
    console.log("tileLength " + tileLength);

    var box = new Array(tileLength);
    console.log("box" + box);

    for (var i = 0; i < box.length; i++) {
        box[i] = "box";
    }

    for (var j = 0; j < box.length; j++) {
        var div = document.createElement("div");
        div.id = "box";
        document.body.appendChild(div);
    }

    var boxes = document.querySelector("[id^=box]");

    boxes.addEventListener("click", function () {
        boxes.style.backgroundColor = "purple";
    });
}

createBoxesDynamically();

    #box {
        border: 1px solid;
        width: 50px;
        height: 50px;
        background-color: green;
    }

Answer 1

您不能有多个具有相同id值的元素，这就是为什么无论您单击哪个框，第一个始终受到影响，.querySelector()调用会在找到第一个匹配项后停止寻找。

相反，将创建事件处理程序的代码移到创建框的循环内，只需在this回调中使用click来使回调对单击的框起作用。无需id。而且，因为您将不会使用id，所以不需要数组或第一个循环。

通常，远离依赖id的编码解决方案。是的，它们一开始似乎很精确且易于使用，但是您会发现（并且已经发现）它们创建的脆性解决方案无法很好地扩展。除了id以外，还有许多其他引用和样式化元素的方式。

您还应该尝试避免元素的内联样式（直接在style属性上设置样式），因为这通常会导致代码重复，从而使代码更难以阅读和维护。尽可能多地使用CSS类。

function createBoxesDynamically() {
    var tileLength = Math.floor(Math.random() * 11);
    console.log("tileLength " + tileLength);

    for (var j = 0; j < tileLength; j++) {
        var div = document.createElement("div");
        div.classList.add("box");  // Add the CSS class to the element
        div.addEventListener("click", function () {
          this.classList.add("clickColor");;
        });
        document.body.appendChild(div);
    }
}

createBoxesDynamically();

/* Use Classes instead of IDs */
.box {
        border: 1px solid;
        width: 50px;
        height: 50px;
        background-color: green;
}

.clickColor { background-color: #800080; }

单击后如何使特定的框更改颜色？

1 个答案: