javascript - 如果 src 为空或参数，我如何更改图像占位符的可见性？

Question

我是一名实习生，实际上我在一家网上商店工作。 现在我遇到了一个问题，我的文章图像有多个图像占位符 (image_1-6)。现在的问题是，如果文章只有 2 张图片，其他 4 张的占位符仍然存在。那么，如果 src 为空或我定义的参数，是否有可能隐藏它们？

这是代码片段:

<div class="sideimg grid_2">
  <div id="image_1" class="lb_thumb">
    <a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild1]',1)" onmouseout="swapImgRestore()">
      <img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild1]"id=image1 name="Bild1" alt="Bild1" id="Bild2" />
    </a>
  </div>
  <div id="image_2" class="lb_thumb">
    <a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild2]',1)" onmouseout="swapImgRestore()">
      <img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild2]" id=image2 name="Bild2" alt="Bild2" id="Bild2" />
    </a>
  </div>
  <div id="image_3" class="lb_thumb">
    <a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild3]',1)" onmouseout="swapImgRestore()">
      <img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild3]" id=image3 name="Bild3" alt="Bild3" id="Bild2" />
    </a>
  </div>
  <div id="image_4" class="lb_thumb">
    <a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild4]',1)" onmouseout="swapImgRestore()">
      <img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild4]" id=image4 name="Bild4" alt="Bild4" id="Bild2" />
    </a>
  </div>
  <div id="image_5" class="lb_thumb">
    <a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild5]',1)" onmouseout="swapImgRestore()">
      <img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild5]" id=image5 name="Bild5" alt="Bild5" id="Bild2" />
    </a>
  </div>
  <div id="image_6" class="lb_thumb">
    <a href="javascript:;" onmouseover="swapImage('Bild1','','http://media-11teamsports.de/ArticleBig/[ArtikelOnlinebezeichnungD.Bild6]',1)" onmouseout="swapImgRestore()">
      <img class="lb_detailimg" src="http://media-11teamsports.de/ArticleSmall/[ArtikelOnlinebezeichnungD.Bild6]" id=image6 name="Bild6" alt="Bild6" id="Bild2" />
    </a>
  </div>
</div>

这是实时版本(wip):http://www.ebay.de/itm/Jako-Tape-10-Meter-2-5-cm-breit-Rot-F01-/272269970423 ？

我对 html css 和 js 的了解都是我自学的，所以我希望这个片段没问题。 正如你所看到的，我有 6 张带有 js 图像交换的图像。唯一剩下的问题是我们的数据库不包含每个占位符的图像，所以如果只有 4 张图片，仍然有 2 个空框。那么我怎样才能摆脱它们呢？

谢谢大家的帮助，请原谅我来自德国的英语。

Answer 1

您可以尝试使用 CSS 选择器来获取 html 属性，如下所示:

.lb_detailimg[src]{
    (Whatever css u need goes here)
    display: block;
}
.lb_detailimg{
    display: none;
}

如果有<img>类lb_detailimg没有 src属性不会显示。

您还可以在 src 中使用关键字属性来实现这一点，就像这样:

.lb_detailimg{
    (Whatever css u need goes here)
}
.lb_detailimg[src=keyword]{
    display: none;
}

编辑:

由于您不能在 CSS 中为父元素提供样式，因此这里有一个 JS 片段应该可以正常工作:

window.onload = function(){
    var img_containers = document.getElementsByClassName("lb_thumb");
    for(var i=0; i<img_containers.length;i++){
        if(img_containers[i].getElementsByTagName("img")[0].src.indexOf("keyword") > -1){
            img_containers[i].style.display = "none";
        }
    }
}

在 if 中的第 4 行==> .indexOf( “你的关键字在这里” )