массив div не анализируется в функции onclick в javascript - PullRequest
Новая
       4

массив div не анализируется в функции onclick в javascript

0 голосов
/ 16 декабря 2018

Я пытаюсь создать программу, в которой, когда пользователь щелкает по любому из элементов div в элементе div id types, countries, languages, genres, который щелкает элемент div, должен переключать цвет на зеленый или черный, а также перечисляет все соседние элементы 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 Ответ

0 голосов
/ 16 декабря 2018

Функция обработчика события '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)";
                    }
                }; 
            }
        }
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...