簡體   English   中英

jQuery從div中的一組圖像中獲取圖像元素ID

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM