[英]Jquery get the image element ID from a group of images in a div
我有一个简单的问题,我找不到出路。 我正在做一个小的,简单的滑块/图库1)“如果单击按钮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>
您可以使用:visible选择器获取可见图像
var $imgvisible = $('.slider img:visible');
alert($imgvisible.attr('id'))
但是,当页面加载时,它不会返回任何内容,因为没有可见的图像
演示: 小提琴
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.