如何使用帶有節點列表的Javascript更改其他元素的樣式

Question

在使用js腳本時需要幫助。

<ul class="producers-links">
    <li class="section_All active-producer">A-Z</li>
    <li class="section_0-9">0-9</li>
    <li class="section_A">A</li>
    <li class="section_B">B</li>
    <li class="section_C">C</li>
</ul>

和

 <div class="producers-list">
    <div class="producers-container" id="producers-0-9">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container" id="producers-A">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container" id="producers-B">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container" id="producers-C">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>

如何制作允許用戶單擊列表元素的js腳本，然后生產者列表中的所有div都將顯示：無，而沒有在列表中單擊的那個。

    var producersList = document.querySelectorAll('ul.producers-links>li');
    var producersLists = document.querySelectorAll('div.producers-list>div.producers-container');
    for (var i = 0; i < producersList.length; i++) {
        producersList[i].addEventListener('click', function () {
            document.querySelector('.active-producer').classList.remove('active-producer');
            this.classList.add('active-producer');

            var index = 0,
                length = producersList.length;
            for (; index < length; index++) {
                producersLists[index].style.display = "none";
            }
        });

    }

這使我可以從“生產者-容器”中隱藏所有元素，但是我不知道如何僅顯示列表中之前單擊的一個元素。

Answer 1

首先，您應該在第二個列表中使用類而不是id，以便將來能夠添加更多過程

嘗試這個：

<ul class="producers-links">
    <li id="section_All" class="active-producer">A-Z</li>
    <li id="section_0-9">0-9</li>
    <li id="section_A">A</li>
    <li id="section_B">B</li>
    <li id="section_C">C</li>
</ul>

<div class="producers-list">
    <div class="producers-container section_0-9 section_All">
        <div class="break-producers">0-9</div>
    </div>
    <div class="producers-container section_A section_All">
        <div class="break-producers">A</div>
        <a href="">Producer 1</a>
    </div>
    <div class="producers-container section_B section_All">
        <div class="break-producers">B</div>
        <a href="">Producer 2</a>
    </div>
    <div class="producers-container section_C section_All">
        <div class="break-producers">C</div>
        <a href="">Producer 3</a>
    </div>
</div>

    var producersList = document.querySelectorAll('ul.producers-links > li');
    var producersLists = document.querySelectorAll('.producers-container');

    for (var i = 0; i < producersList.length; i++) {
        producersList[i].addEventListener('click', function () {
            document.querySelector('.active-producer').classList.remove('active-producer');
            this.classList.add('active-producer');

            for (var index = 0; index < producersLists.length ; index++) {

                var currElement = producersLists[index];
                var hide = !currElement.classList.contains(this.id);
                producersLists[index].style.display =  hide? "none" : "block";
            }
        });

    }

Answer 2

點擊時，您可以依次：
- 全部藏起來
-選擇一個ID末尾與所單擊項的textContent相同的ID（如果文本為AZ，則選擇全部ID）

 var producersList = document.querySelectorAll('ul.producers-links>li'); var producersLists = document.querySelectorAll('div.producers-list>div.producers-container'); // add eventlistener... producersList.forEach(x => { x.addEventListener("click", x => { hideAll(); document.querySelector('.active-producer').classList.remove('active-producer'); x.target.classList.add('active-producer'); const txt = x.target.textContent; selectForText(txt); }); }); // hide/show all... function hideAll(bShow) { const cl = bShow === true?"block":"none"; producersLists.forEach(x => x.style.display = cl); } // select for text... function selectForText(txt) { if(txt === "AZ") { // select all... hideAll(true); return; } // the [...nodelist] part allows to 'cast' to proper array, and to have access to find() function... const found = [...producersLists].find(q => q.id.split("producers-")[1] === txt); if(found) { found.style.display = "block"; } else { // ??? } } 

 .active-producer { color: #19f; } 

 <ul class="producers-links"> <li class="section_All active-producer">AZ</li> <li class="section_0-9">0-9</li> <li class="section_A">A</li> <li class="section_B">B</li> <li class="section_C">C</li> </ul> And <div class="producers-list"> <div class="producers-container" id="producers-0-9"> <div class="break-producers">0-9</div> </div> <div class="producers-container" id="producers-A"> <div class="break-producers">A</div> <a href="">Producer 1</a> </div> <div class="producers-container" id="producers-B"> <div class="break-producers">B</div> <a href="">Producer 2</a> </div> <div class="producers-container" id="producers-C"> <div class="break-producers">C</div> <a href="">Producer 3</a> </div> </div>