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

我有一個簡單的問題，我無法找到出路。如果點擊按鈕1，圖像一出現「 2）」如果我點擊按鈕2，圖像1，向左滑動，並且圖像2在「 3」中消失）「如果點擊按鈕1，圖像一出現」 3）我點擊任何圖像，例如圖像3，當前圖像幻燈片左側，新的淡入「Jquery從一組div中的圖像中獲取圖像元素ID

我唯一的問題是，我如何獲得可見圖像的ID，已經顯示。這樣我就可以滑動它，並且相對於點擊的按鈕淡入圖像。

默認情況下所有的圖像都是css「display none」，並駐留在「.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>

來源

2014-01-19 Randy Geily

可以使用:visible selector獲得可視圖像

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

但是，當頁面加載，因爲沒有可見的圖像也不會返回任何

演示：Fiddle

來源

2014-01-19 06:26:41

非常感謝你，那正是我所期待的。 –

@ArunPJohny：總是很高興看到你的答案與關鍵信息.. + 1！：d – NoobEditor

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

回答

相關問題