jquery从div中的一组图像中获取图像元素ID答案

【问题标题】：Jquery get the image element ID from a group of images in a divjquery从div中的一组图像中获取图像元素ID
【发布时间】：2014-01-19 14:32:57
【问题描述】：

我有一个简单的问题，我找不到出路。我正在做一个小而简单的滑块/画廊 1）“如果点击按钮1，图像一出现” 2）“如果我点击按钮 2，图像 1，向左滑动，图像 2 淡入” 3）“如果我点击任何图像，例如IMAGE 3，当前图像向左滑动，新图像淡入”

我唯一的问题是，如何获取已显示的可见图像的 ID。这样我就可以滑动它，并相对于单击的按钮淡入图像。

默认情况下，所有图片都是css“不显示”并驻留在“.slider”div中。

<body>
<div class = "slider">
    <img id="1" src = "img/img1.jpg" class = "pic" border = "0" />
    <img id="2" src = "img/img2.jpg" class = "pic" border = "0" />
    <img id="3" src = "img/img3.jpg" class = "pic" border = "0" />
</div>

<button type="button" class="btn" id="btn1">Btn 1</button>
<button type="button" class="btn" id="btn2">Btn 2</button>
<button type="button" class="btn" id="btn3">Btn 3</button>
</body>



<style type = "text/css">

.slider{
width:400px;
height:200px;
overflow:hidden;
margin:30px auto;
}
.slider img{
width:400px;
height:200px;
    display:none;
}
</style>    

<script>
$(document).ready(function(){

    $(".btn").click(function() {
                    //alert($(".slider").children('.pic').attr('id'));
                    // or using (":visible:);
            )};
)};
</script>

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

您可以使用:visible selector 获取可见图像

var $imgvisible = $('.slider img:visible');
alert($imgvisible.attr('id'))

但是当页面加载时它不会返回任何内容，因为没有可见的图像

演示：Fiddle

【讨论】：

非常感谢，这正是我想要的。
@ArunPJohny ：总是很高兴看到您的回答与关键信息..+1！ :D