JavaScript如何使用數組和循環而不是多個if語句

Question

我繼續在此JavaScript代碼段中添加更多if statements ，以顯示和隱藏圖像縮略圖。 如果src為空，則該片段僅隱藏縮略圖。

我需要一種將代碼段轉換為數組和循環的方法，這樣，當我在div添加更多圖像時，就不必繼續添加更多if statements 。

我將如何以某種方式壓縮我的代碼，以使我不會得到數十或數百個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>

Answer 1

為了獲得所有圖像，您將必須使用：

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 div中具有的任何數量的圖像。

Answer 2

試試這個方法

var thumbParent = document.getElementsById( "thumbs" );
var numberOfThumbs = thumbParent.children;
for ( var counter = 1; counter <= numberOfThumbs ; 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";
  }
}

Answer 3

你可以做這樣的事情

首先找到子節點的長度，然后遍歷圖像，然后更改沒有src的圖像的屬性。

這是JSFiddle文件https://jsfiddle.net/Simplybj/jv2qL54u/

var nodelist = document.getElementById("thumbs").children.length;
for (var images = 0; images <= nodelist; images++) {

  var image = document.getElementsByTagName("img")[images];
  var src = image.getAttribute("src");
  if (src.length == 0) {
    //write here your logic
    image.style.display = "none";
    image.src = "clearpixeldot.png";
  }
}

要消除圖像閃爍，可以先隱藏所有圖像，然后僅顯示帶有src的圖像。 在此處更新https://jsfiddle.net/Simplybj/4w00hsze/ 。

Answer 4

請使用以下腳本：

$(".thumbs").find("a").each(function(){
    var _thiss = $(this);
    var image_obj = $(this).find("img");
  if ($(image_obj).attr("src") == "") {
      var img = $(_thiss).attr("href");
      $(image_obj).css("display","none");
      $(img).css("display","none");
      $(image_obj).attr("src","clearpixeldot.png");
      $(img).attr("src","clearpixeldot.png");
  }
});