如何使用 jquery 找出显示哪些图像（即可见）和隐藏哪些图像？答案

【问题标题】：How to find out which images are shown i.e visible and which images are hidden using jquery?如何使用 jquery 找出显示哪些图像（即可见）和隐藏哪些图像？
【发布时间】：2010-02-23 22:42:10
【问题描述】：

我的页面上有 5 张图片。这些图像使用 css 类中的 Z-index 相互分层。在这 5 个图像中，我为 4 个图像分配了一个 css 类，对于一个图像，即第一个图像 img1，我只在图像标签中使用样式属性添加了 css 效果。现在在这 5 张图像中，第一张图像 img1 始终可见，在剩余的 4 张图像中，只有 1 张图像可见，其他三张图像保持隐藏。这 4 个图像我已经分配了一个 css 类。问题我在页面上有 3 个按钮，每个按钮都有不同的用途和功能。我只想知道当使用 Jquery 单击这三个按钮中的任何一个时，哪些 2 个图像是可见的，即在页面上显示（未隐藏）。

粗略的 HTML 代码如下所示，以获得简要的想法

<html>
<head>
</head>
<body>

<input type="button" id="button_1" name="zoomin" value="Zoom In" tabindex="18">
<input type="button" id="button_2" name="zoomout" value="Zoom Out" tabindex="19">
<input type="button" id="button_3" name="original" value="Original" tabindex="20">

<div id="div1" class="test1" >
    <img src="images/base.jpg" style="z-index:1; position:absolute; top:0; left:0; width:550; height:750">
    <img src="images/yellow_refno.gif" class="classforimg">
    <img src="images/yellow_title.gif" class="classforimg">
    <img src="images/yellow_gender.gif" class="classforimg">
    <img src="images/yellow_gender.gif" class="classforimg">          
</div>
</body>
</html>

所以朋友们请帮助我！谢谢！

【问题讨论】：

标签： jquery

【解决方案1】：

jQuery :visible 选择器应该适合您的需要

$('img:visible')

【讨论】：

【解决方案2】：

$('#div1 img:visible')

这将返回#div1 下的可见图像集合

正如 Andreas Niedermair 所述，两者之间存在差异：

$('#div1 img:visible')

选择所有图像后代并且：

$('#div1 > img:visible')

仅选择直接后代。

差异与给出的代码示例没有显着相关。

【讨论】：

'#div1 img:visible'和'#div1 > img:visible'选择器有区别，应该提一下！
@Andreas：是的，那是什么？！
@Andreas - 鉴于代码，技术性意义不大。不知道为什么有人会删除我的投票。

【解决方案3】：

问题是如何隐藏/显示图像。如果你使用 hide(),show() 方法来切换显示属性，那么你可以使用：

$("img:visible").attr("src")

找出可能的图像。最好在图片中分配 id，这样就不需要依赖 src 属性了。

如果你修改了z-index，那么你需要读取所有图像的z-index才能找到，哪个在其他图像之上。您可以使用 css() 方法来做到这一点。

【讨论】：