Question

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

粗略的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>

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

Answer 1

jQuery :visible选择器应该符合您的需求

$('img:visible')

Answer 2

$('#div1 img:visible')

这将返回＃div1

下的可见图像集合

正如Andreas Niedermair所说，之间有区别：

$('#div1 img:visible')

选择所有图像后代，并且：

$('#div1 > img:visible')

仅选择直系后代。

差异与给出的代码示例无关。

Answer 3

问题是如何隐藏/显示图像。如果使用hide（），show（）方法切换显示属性，则可以使用：

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

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

如果修改z-index，则需要读取要查找的所有图像的z-index，哪一个位于其他图像之上。你可以用css（）方法做到这一点。

如何找出哪些图像是可见的，哪些图像是使用jquery隐藏的？

3 个答案: