代码之家 › 专栏 › 技术社区 › aman

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

onclick javascript

aman · 技术社区 · 6 年前

我正在尝试制作一个程序,当用户单击ID分区中的任何一个分区时, types, countries, languages, genres 单击的DIV应将颜色切换为绿色或黑色,并在控制台中列出单击的DIV的所有相邻DIV。但出于某种原因,它只打印ID最后一个分区的分区 genres 在控制台上点击任意一个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>

1 回复 | 直到 6 年前

MO the Explorer 6 年前

需要更新“onclick”事件处理程序函数。

此外,对于“onlick”函数的“inserting”变量作用域,它对循环中最后一个变量的所有处理程序都具有相同的值。

解决这一问题的一种方法是如下更新代码:

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)";
                    }
                }; 
            }
        }
    }