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 ==＆gt;中的第4行.indexOf( “yourKeyWordHere”)

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

1 个答案: