javascript - 如何点击一个它显示选定的类

Question

使用下面的代码需要什么，所以当我单击全部、北、东、南或西时，只显示与这些类关联的图像

<ul>
<li>All</li>
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>

<div class="container">
<div><img src="image1" class="north all"></div>
<div><img src="image2" class="east all"></div>
<div><img src="image3" class="south all"></div>
<div><img src="image4" class="west all"></div>
<div><img src="image5" class="west all"></div>
<div><img src="image6" class="north all"></div>
<div><img src="image7" class="south all"></div>
<div><img src="image8" class="south all"></div>
</div>

标签： javascripthtml-lists

Answer 1

var list = document.querySelectorAll('#list li')

for(let i = 0; i < list.length; i++) {
  var item = list[i];
  item.addEventListener('click', function (e) {
    var cl = e.target.innerHTML.toLowerCase();
    if (cl != 'all') {
      var all = document.querySelectorAll('.all')
      for (let j = 0; j < all.length; j++) {
        let a = all[j];
        a.style.display = 'none';
      }
    }
    var all = document.querySelectorAll('.' + cl)
      for (let j = 0; j < all.length; j++) {
        let a = all[j];
        a.style.display = 'block';
      }
  })
}
  

.all {
  display: none;
}

<ul id="list">
<li>All</li>
<li>North</li>
<li>East</li>
<li>South</li>
<li>West</li>
</ul>

<div class="container">
  <div><img src="image1" class="north all"></div>
  <div><img src="image2" class="east all"></div>
  <div><img src="image3" class="south all"></div>
  <div><img src="image4" class="west all"></div>
  <div><img src="image5" class="west all"></div>
  <div><img src="image6" class="north all"></div>
  <div><img src="image7" class="south all"></div>
  <div><img src="image8" class="south all"></div>
</div>