Question

我正在尝试制作一个程序，当用户单击ID为types, countries, languages, genres的div中的任何div时，单击div的颜色应切换为绿色或黑色，并列出所有相邻的div在控制台中单击的div。但是由于某种原因，它仅在控制台中按任何单击的div打印id为genres的最后一个div的div。请帮助

我的代码段：

var filter_options_div = document.getElementById("filter_options").children;
    for (var y = 0; y < filter_options_div.length; y++) {
        if (filter_options_div[y].tagName == "DIV") {
            var option = filter_options_div[y].querySelectorAll("div");
            for (var x = 0; x < option.length; x++) {
                option[x].style.backgroundColor = "green";
                var inserting = option;
                option[x].onclick = function() {
                    for (var z = 0; z < inserting.length; z++) {
                        console.log(inserting[z]);
                    }
                    if (this.style.backgroundColor == "rgb(51, 51, 51)") {
                        this.style.backgroundColor = "green";
                    } else {
                        this.style.backgroundColor = "rgb(51, 51, 51)";
                    }
                }; 
            }
        }
    }

#filter_options {
    width: 50%;
    height: 100%;
    position: fixed;
    top: 0;
    z-index: 2;
    background-color: orange;
    float: left;
}

#filter_options p {
    margin-top: 50px;
}

#filter_options div {
    background-color: rgb(51, 51, 51);
    text-align: center;
    overflow: auto;
    white-space: nowrap;
}

#filter_options div div {
    font-size: 18px;
    display: inline-block;
    color: white;
    padding: 14px;
    background-color: rgb(51, 51, 51);
    user-select: none;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TEST</title>
</head>
<body>
    <div id="filter_options">
        <p></p>
        <div id="types">
            <div>Film</div><div>Tv-Show</div><div>Music</div>
        </div>
        <p></p>
        <div id="countries">
            <div>Australia</div><div>China</div><div>France</div><div>Hong-Kong</div><div>India</div><div>Japan</div><div>Canada</div><div>Germany</div><div>Italy</div><div>Spain</div><div>U.K.</div><div>United States</div>
        </div>
        <p></p>
        <div id="languages">
            <div>English</div><div>Hindi</div><div>Punjabi</div>
        </div>
        <p></p>
        <div id="genres">
            <div>Action</div><div>Adventure</div><div>Animation</div><div>Biography</div><div>Comedy</div><div>Crime</div><div>Documentary</div><div>Drama</div><div>Fantasy</div><div>Family</div><div>Foreign</div><div>History</div><div>Horror</div><div>Kids</div><div>Music</div><div>Magical realism</div><div>Mystery</div><div>News</div><div>Philosophical</div><div>Political</div><div>Reality</div><div>Romance</div><div>Saga</div><div>Satire</div><div>Sci-Fi</div><div>Social</div><div>Speculative</div><div>Sport</div><div>Talk</div><div>Thriller</div><div>Urban</div><div>Western</div><div>War</div>
        </div>
    </div>
</body>
</html>

Answer 1

'onclick'事件处理函数需要更新。

此外，给定“ onlick”函数的“插入”变量作用域，它将对所有处理程序具有相同的值，这是循环中的最后一个变量。

解决此问题的一种方法是更新代码，如下所示：

function getSiblings(el, filter) {
    var siblings = [];
    el = el.parentNode.firstChild;
    do { if (!filter || filter(el)) siblings.push(el); } while (el = el.nextSibling);
    return siblings;
}
var filter_options_div = document.getElementById("filter_options").children;
    for (var y = 0; y < filter_options_div.length; y++) {
        if (filter_options_div[y].tagName == "DIV") {
            var option = filter_options_div[y].querySelectorAll("div");
            for (var x = 0; x < option.length; x++) {
                option[x].style.backgroundColor = "green";
                var inserting = option;
                option[x].onclick = function(event) {
                    var neighbors = getSiblings(event.currentTarget);
                    for (var z = 0; z < neighbors.length; z++) {
                        console.log(neighbors[z]);
                    }
                    if (this.style.backgroundColor == "rgb(51, 51, 51)") {
                        this.style.backgroundColor = "green";
                    } else {
                        this.style.backgroundColor = "rgb(51, 51, 51)";
                    }
                }; 
            }
        }
    }

在javascript中的onclick函数中未解析的div数组

1 个答案: