使用JavaScript隐藏一个图片并保留其SRC。

Question

我有一个定义如下的图片：

<div id="logo" class="exhibit-flowingFacet">
  <div class="wrapper">
    <img src="path/to/the/image/logo.png">
    </img>
  </div>
</div>

我想使用JavaScript通过图像的src获取它并将其隐藏。

function hideImage() { 
  if (document.getElementById() 
  {
    if (document.getElementById('logo').getElementsByClassName('wrapper').src=="path/to/the/image/logo.png")
    {
      document.style.visibility = 'hidden';
    }  
  }
};

hideImage();

但是代码没有起作用！有什么想法吗？

- user2747249

---

你可以在img属性中添加一个id。然后使用jQuery，你可以使用：$("#id").hide(); - Vincent Hogendoorn

问题在于我无法编辑文档的定义。 - user2747249

Answer 1

使用jQuery，您可以编写以下代码：

$('img[src="path/to/the/image/logo.png"]').hide();

- jukempff

Answer 2

你必须确保在页眉中使用以下代码链接到jQuery库

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

如果你不想在屏幕上渲染它，你可以在CSS中使用display:none，只需将图像源传递到函数中即可。

function hideImage(imageSrc) { 
$('img[src=" + imageSrc + "]').css("display","none");

}

并使用以下方法重新启动它

$('img[src="path/to/the/image/logo.png"]').css("display","block");

- Jdsmith.It

Answer 3

你可以尝试这个：-

$('img[src="path/to/the/image/logo.png"]').css("display","none");

或者尝试这个：

    this.style.display = "none";

- Rahul Tripathi

Answer 4

getElementsByClassName('wrapper') 是一个数组，因此您必须访问第一个元素的 src 属性 - 至少在您的情况下是这样。

if (document.getElementById('logo').getElementsByClassName('wrapper')[0].src=="path/to/the/image/logo.png")

- urzeit

Answer 5

尝试这个脚本：

function hideImage() {
    var path = 'path/to/the/image/logo.png';
    var img = document.getElementById('logo').getElementsByTagName('img')[0];
    if (img && img.getAttribute('src').indexOf(path) > -1) {
        img.style.visibility = 'hidden';
    }
}

if (window.addEventListener) {
    window.addEventListener('load', hideImage, false);
} else if (window.attachEvent) { // for older IE8-6 compatibility
    window.attachEvent('onload', hideImage);
}

JSFiddle

，这是与编程有关的内容。

- Stano

---

谢谢，我试过了，它可以工作几秒钟，然后出现一个 JavaScript 错误：img 未定义。顺便说一下，这个图片并不是直接在带有标志的部分下定义的。我们需要通过 className 为 wrapper 的 div 吗？ - user2747249

很抱歉，我不知道为什么它不起作用。你可以尝试以下修改吗？http://jsfiddle.net/ZC4yA/4/（[querySelector](http://caniuse.com/queryselector)方法适用于IE8，比[getElementsByClassName](http://caniuse.com/getelementsbyclassname)更兼容）或者这个http://jsfiddle.net/ZC4yA/3/（如果你也想要IE7的兼容性）。 - Stano

非常感谢，我使用了你的代码生成了我需要的内容 http://jsfiddle.net/amani1988/QCwVg/4/ 并且它可以正常运行 :) 但是当我把这段代码复制到我的 JavaScript 文件中，在 <script> </script> 中定义之后，它就无法工作了！我认为它需要一个外部 JavaScript 源代码来添加。你有什么想法吗？ - user2747249

在浏览器中查看这两个jsfiddle的源代码：http://jsfiddle.net/QCwVg/5/show 或者 http://jsfiddle.net/QCwVg/6/show - javascript应在文档创建后执行（否则，.getElementById将返回undefined，正如您在第一条评论中所说），因此可以在onload处理程序中或在闭合的</body>标签之前执行。 - Stano