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

我继续向这个JavaScript代码段添加更多的

if语句

，以显示和隐藏图像缩略图。如果

src

为空，则代码段仅隐藏缩略图

我需要一种将代码片段转换为数组和循环的方法，这样当我在

div

中添加更多图像时，就不必继续添加更多的

if语句

我该如何压缩我的代码，这样我就不会有几十个或几百个
if语句了

我必须使用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>


函数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=“无”；
img1.style.display=“无”；
thumb1.src=“clearpixeldot.png”；
img1.src=“clearpixeldot.png”；
}
if（（thumb2.getAttribute（“src”）=“”）{
thumb2.style.display=“无”；
img2.style.display=“无”；
thumb2.src=“clearpixeldot.png”；
img2.src=“clearpixeldot.png”；
}
if（（thumb3.getAttribute（“src”）=“”）{
thumb3.style.display=“无”；
img3.style.display=“无”；
thumb3.src=“clearpixeldot.png”；
img3.src=“clearpixeldot.png”；
}
if（（thumb4.getAttribute（“src”）=“”）{
thumb4.style.display=“无”；
img4.style.display=“无”；
thumb4.src=“clearpixeldot.png”；
img4.src=“clearpixeldot.png”；
}
if（（thumb5.getAttribute（“src”）=“”）{
thumb5.style.display=“无”；
img5.style.display=“无”；
thumb5.src=“clearpixeldot.png”；
img5.src=“clearpixeldot.png”；
}
if（（thumb6.getAttribute（“src”）=“”）{
thumb6.style.display=“无”；
img6.style.display=“无”；
thumb6.src=“clearpixeldot.png”；
img6.src=“clearpixeldot.png”；
}
if（（thumb7.getAttribute（“src”）=“”）{
thumb7.style.display=“无”；
img7.style.display=“无”；
thumb7.src=“clearpixeldot.png”；
img7.src=“clearpixeldot.png”；
}
if（（thumb8.getAttribute（“src”）=“”）{
thumb8.style.display=“无”；
img8.style.display=“无”；
thumb8.src=“clearpixeldot.png”；
img8.src=“clearpixeldot.png”；
}
if（（thumb9.getAttribute（“src”）=“”）{
thumb9.style.display=“无”；
img9.style.display=“无”；
thumb9.src=“clearpixeldot.png”；
img9.src=“clearpixeldot.png”；
}
if（（thumb10.getAttribute（“src”）=“”）{
thumb10.style.display=“无”；
img10.style.display=“无”；
thumb10.src=“clearpixeldot.png”；
img10.src=“clearpixeldot.png”；
}
if（（thumb11.getAttribute（“src”）=“”）{
thumb11.style.display=“无”；
img11.style.display=“无”；
thumb11.src=“clearpixeldot.png”；
img11.src=“clearpixeldot.png”；
}
if（（thumb12.getAttribute（“src”）=“”）{
thumb12.style.display=“无”；
img12.style.display=“无”；
thumb12.src=“clearpixeldot.png”；
img12.src=“clearpixeldot.png”；
}
}
试试这种方法

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

var thumbprent=document.getElementsById（“thumbs”）；
var numberOfThumbs=thumbParent.children；
对于（var counter=1；counter尝试这种方法

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

var thumbprent=document.getElementsById（“thumbs”）；
var numberOfThumbs=thumbParent.children；
对于（var counter=1；counter要获取所有图像，您必须使用：

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

for（var counter=1；counter为了获得您必须使用的所有图像：

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

对于（var counter=1；counter请使用以下脚本：

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

请使用以下脚本：

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

你可以这样做

首先查找子节点的长度，然后在图像之间循环，然后更改没有src的图像的属性

这是JSFIDLE文件

var nodelist=document.getElementById（“thumbs”）.childrence.length；
对于（var images=0；images您可以这样做

首先查找子节点的长度，然后在图像之间循环，然后更改没有src的图像的属性

这是JSFIDLE文件

var nodelist=document.getElementById（“thumbs”）.childrence.length；
for（var images=0；images非常感谢！这正是我要找的。如果再添加一个图像会怎么样？这样不行。那么我必须将计数器中的12设置为13。但是此方法在所有浏览器中都有效。querySelectorAll在IE9或更低版本中不起作用。@mike you can fetch children（）我明天会分享一把小提琴，这样你就可以看到发生了什么。现在我使用的是你的原始代码，它将在