Question

在上一个问题中，我得到了JS脚本的帮助，该脚本实现了仅显示选定类的目标，我唯一的问题是所显示类的位置不正确。每行和数百行有6张图像。为了便于讨论，可以说我选择了北方的班级，它只会正确显示这些班级元素，但是如果它们从第2行开始，则只会从第2行中的原始位置显示出来，需要执行哪些操作才能使每个新选择正确页面第1行中的第1行？

<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><img src="image9" class="west all"></div>
  <div><img src="image10" class="west all"></div>
  <div><img src="image11" class="north all"></div>
  <div><img src="image12" class="south all"></div>
  <div><img src="image13" class="south all"></div>
</div>


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

修改JS以进行后脚本定位

0 个答案: