Question

被困住了，我相信对此有一个简单的解释。

所以我想遍历所有称为“图像”的类名，并隐藏最后4个：

images = document.getElementsByClassName("images");


for (var i = 0; i < images.length; i++) {
  if(images[i] == images[5] || images[6] || images[7] || images[8]) {
    images[5].style.display = "none";
    images[6].style.display = "none";
    images[7].style.display = "none";
    images[8].style.display = "none";
  }
}

是否有一些代码可以简化？如果要加载大量图像，似乎有点麻烦。

请没有与此相关的框架！非常感谢您的帮助。

Answer 1

正在寻找较短的版本？

images = document.getElementsByClassName("images");

for (var i = 0; i < images.length; i++) {
  if( i >= images.length-4 ) { // Last 4
    images[i].style.display = "none";
  }
}

1<img class="images" src="https://via.placeholder.com/50x50"><br/>
2<img class="images" src="https://via.placeholder.com/50x50"><br/>
3<img class="images" src="https://via.placeholder.com/50x50"><br/>
4<img class="images" src="https://via.placeholder.com/50x50"><br/>
5<img class="images" src="https://via.placeholder.com/50x50">

或@Hector提到的另一个版本

images = [...document.getElementsByClassName("images")].slice(-4); // last 4

for( let i in images ) {
  images[i].style.display = "none";
}

1<img class="images" src="https://via.placeholder.com/50x50"><br/>
2<img class="images" src="https://via.placeholder.com/50x50"><br/>
3<img class="images" src="https://via.placeholder.com/50x50"><br/>
4<img class="images" src="https://via.placeholder.com/50x50"><br/>
5<img class="images" src="https://via.placeholder.com/50x50">

Answer 2

您非常接近。您可以通过做一些简单的数学运算然后按索引隐藏来隐藏最后4个。

images = document.getElementsByClassName("images");

const numberToHide = 4;
const totalImages = images.length;
for (var i = 0; i < totalImages; i++) {
  const indexToHide = totalImages - numberToHide;
  if (i >= indexToHide) {
    images[i].style.display = "none";
  }
}

<div class="images">1</div>
<div class="images">2</div>
<div class="images">3</div>
<div class="images">4</div>
<div class="images">5</div>
<div class="images">6</div>
<div class="images">7</div>

Answer 3

您可以检查for循环中被i的值减去的元素数是否小于或等于4，以隐藏最后4个元素。

1<img class="image" src="somesource">
<br/>
2<img class="image" src="somesource">
<br/>
3<img class="image" src="somesource">
<br/>
4<img class="image" src="somesource">
<br/>
5<img class="image" src="somesource">
<br/>
6<img class="image" src="somesource">
<br/>
7<img class="image" src="somesource">
<br/>
8<img class="image" src="somesource">
<br/>
<script>
var images = document.getElementsByClassName("image");


for (var i = 0; i < images.length; i++) {
  if(images.length - i <= 4){
   images[i].style.display = "none";
  }
}
</script>

Answer 4

首先，if(images[i] == images[5] || images[6] || images[7] || images[8])不是将值与其他几个值进行比较的方式。 ||运算符用于布尔逻辑，因此您需要重复==比较以使其正确（但不能简短）。另请参见this Q&A。

最短的时间以及与DOM元素的匹配可能是通过Array.from实现的：

Array.from(document.querySelectorAll(".images"),(img,i)=>img.style.display=i>4?"none":"");

<div class="images">0</div>
<div class="images">1</div>
<div class="images">2</div>
<div class="images">3</div>
<div class="images">4</div>
<div class="images">5</div>
<div class="images">6</div>
<div class="images">7</div>

遍历类名并将其隐藏在Vanilla JS中

4 个答案: