javascript - JavaScript如何使用数组和循环而不是多个if语句

我继续在此JavaScript代码段中添加更多if statements以显示和隐藏图像缩略图。如果src为空，则该片段仅隐藏缩略图。

我需要一种将代码段转换为数组和循环的方法，这样，当我在if statements中添加更多图像时，就不必继续添加更多的div。

我将如何以某种方式压缩我的代码，以免最终没有成百上千的if statements？

我必须使用JavaScript。 jQuery不是一个选择。

<div id="thumbs">
  <a href="#img1"><img id="thumb1" src="photo.png"></a>
  <a href="#img2"><img id="thumb2" src=""></a>
  <a href="#img3"><img id="thumb3" src=""></a>
  <a href="#img4"><img id="thumb4" src=""></a>
  <a href="#img5"><img id="thumb5" src=""></a>
  <a href="#img6"><img id="thumb6" src=""></a>
  <a href="#img7"><img id="thumb7" src="picture.jpg"></a>
  <a href="#img8"><img id="thumb8" src=""></a>
  <a href="#img9"><img id="thumb9" src=""></a>
  <a href="#img10"><img id="thumb10" src=""></a>
  <a href="#img11"><img id="thumb11" src="stock.gif"></a>
  <a href="#img12"><img id="thumb12" src=""></a>
</div>

<script>
function checkThumbs() {

var thumb1 = document.getElementById("thumb1"); var img1 = document.getElementById("img1");
var thumb2 = document.getElementById("thumb2"); var img2 = document.getElementById("img2");
var thumb3 = document.getElementById("thumb3"); var img3 = document.getElementById("img3");
var thumb4 = document.getElementById("thumb4"); var img4 = document.getElementById("img4");
var thumb5 = document.getElementById("thumb5"); var img5 = document.getElementById("img5");
var thumb6 = document.getElementById("thumb6"); var img6 = document.getElementById("img6");
var thumb7 = document.getElementById("thumb7"); var img7 = document.getElementById("img7");
var thumb8 = document.getElementById("thumb8"); var img8 = document.getElementById("img8");
var thumb9 = document.getElementById("thumb9"); var img9 = document.getElementById("img9");
var thumb10 = document.getElementById("thumb10"); var img10 = document.getElementById("img10");
var thumb11 = document.getElementById("thumb11"); var img11 = document.getElementById("img11");
var thumb12 = document.getElementById("thumb12"); var img12 = document.getElementById("img12");

  if ((thumb1).getAttribute("src") == "") {
      thumb1.style.display = "none";
      img1.style.display = "none";
      thumb1.src = "clearpixeldot.png";
      img1.src = "clearpixeldot.png";
  }
  if ((thumb2).getAttribute("src") == "") {
      thumb2.style.display = "none";
      img2.style.display = "none";
      thumb2.src = "clearpixeldot.png";
      img2.src = "clearpixeldot.png";
  }
  if ((thumb3).getAttribute("src") == "") {
      thumb3.style.display = "none";
      img3.style.display = "none";
      thumb3.src = "clearpixeldot.png";
      img3.src = "clearpixeldot.png";
  }
  if ((thumb4).getAttribute("src") == "") {
      thumb4.style.display = "none";
      img4.style.display = "none";
      thumb4.src = "clearpixeldot.png";
      img4.src = "clearpixeldot.png";
  }
  if ((thumb5).getAttribute("src") == "") {
      thumb5.style.display = "none";
      img5.style.display = "none";
      thumb5.src = "clearpixeldot.png";
      img5.src = "clearpixeldot.png";
  }
  if ((thumb6).getAttribute("src") == "") {
      thumb6.style.display = "none";
      img6.style.display = "none";
      thumb6.src = "clearpixeldot.png";
      img6.src = "clearpixeldot.png";
  }
  if ((thumb7).getAttribute("src") == "") {
      thumb7.style.display = "none";
      img7.style.display = "none";
      thumb7.src = "clearpixeldot.png";
      img7.src = "clearpixeldot.png";
  }
  if ((thumb8).getAttribute("src") == "") {
      thumb8.style.display = "none";
      img8.style.display = "none";
      thumb8.src = "clearpixeldot.png";
      img8.src = "clearpixeldot.png";
  }
  if ((thumb9).getAttribute("src") == "") {
      thumb9.style.display = "none";
      img9.style.display = "none";
      thumb9.src = "clearpixeldot.png";
      img9.src = "clearpixeldot.png";
  }
  if ((thumb10).getAttribute("src") == "") {
      thumb10.style.display = "none";
      img10.style.display = "none";
      thumb10.src = "clearpixeldot.png";
      img10.src = "clearpixeldot.png";
  }
  if ((thumb11).getAttribute("src") == "") {
      thumb11.style.display = "none";
      img11.style.display = "none";
      thumb11.src = "clearpixeldot.png";
      img11.src = "clearpixeldot.png";
  }
  if ((thumb12).getAttribute("src") == "") {
      thumb12.style.display = "none";
      img12.style.display = "none";
      thumb12.src = "clearpixeldot.png";
      img12.src = "clearpixeldot.png";
  }
}
</script>

最佳答案

为了获得所有图像，您将必须使用：

var allImgs = document.querySelectorAll('.thumbs img');

现在，您可以循环执行它们的逻辑，

for ( var counter = 1; counter <= allImgs.length; counter++)
{
  var thumb = document.getElementById( "thumb" + counter );
  var img = document.getElementById( "img" + counter );
  if ( img && thumb && thumb.getAttribute("src") == "")  //check if the element exists to avoid any run time issues
   {
    thumb.style.display = "none";
    img.style.display = "none";
    thumb.src = "clearpixeldot.png";
    img.src = "clearpixeldot.png";
   }
}

这将是动态的，适用于您的div中具有类thumbs的任何数量的图像。

关于javascript - JavaScript如何使用数组和循环而不是多个if语句，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35402814/