Question

我继续向此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>

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的任意数量的图片。

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

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

4 个答案: