如何使用带有节点列表的 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

首先，您应该在第二个列表中使用 classes 而不是 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

点击后，您可以按顺序：
- 全部隐藏
- 选择与所点击项目的 textContent 具有相同 id 结尾的那个（如果文本是 A-Z，则选择全部）

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 === "A-Z") {
    // 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">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>
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>