點擊div隱藏然後顯示頁面上的下一個div？

請參閱http://jsfiddle.net/rabelais/DW5CV/點擊div隱藏然後顯示頁面上的下一個div？

我已經開始拼湊這個小提琴，試圖找出如何我可以用一個很簡單的一塊jQuery的，顯示的第一個完整畫面時頁面加載，那麼當用戶點擊該圖像被隱藏，並且通過許多圖像顯示頁面上的下一個圖像等等。我知道我可以給他們所有的個人身份證，然後寫一段很長的代碼來說明每個div，但我想知道如何以一種更好的方式來完成這項工作？

$('#img1').click(function() { 
    $('#img2').show(); 
    $('#img1').hide(); 
    });

來源

2013-09-30 angela

把所有你會在一個數組來顯示圖像。然後迭代數組，從而在數組的每次迭代中更改圖像的使用.show（）和.hide（）的src值。 –

它應該像一個循環（或）你只需要一次迭代？ – Harry

根據您的樣品小提琴，你可以嘗試像下面：

$('.full').click(function() { 
    $(this).hide(); 
    $(this).next('.full').show(); 
});

注：這將只是一個工作迭代。如果你想循環，我們可以修改代碼。

Demo Fiddle

編輯：要得到循環工作，修改爲下面的代碼。基本上我們正在檢查類是否有next元素（div包含img）。如果存在，我們show它。否則，我們show第一個元素與.full類。

$('.full').click(function() { 
    $(this).hide(); 
    if($(this).next('.full').length === 1) 
     $(this).next('.full').show(); 
    else 
     $('.full').eq(0).show(); 
});

Updated Demo

來源

2013-09-30 11:41:22 Harry

謝謝，你的小提琴可以工作，但是當我將它轉移到我的文件時，我鬆開了全屏幕方面，它點擊到下一個圖像，但突然彈回到第一個圖像sraight。我可能做錯了什麼？ – angela

我有這個工作。謝謝。我們如何讓它循環？ – angela

@angela：我已經更新了答案。請看看，讓我知道它是否適合你。 – Harry

您可以使用JQuery的Animate api，它可以找到here。

來源

2013-09-30 11:28:43 Newtt

我根據你的代碼做了一個非常簡單的小提琴。圖片動畫有.show()和.hide()直到最後一張。然後動畫停止，因爲沒有圖像。

結賬this fiddle。

來源

2013-09-30 11:32:48

您可以使用這樣.....

$('#img2').hide(); 
$('#img1').click(function() { 
    $('#img2').toggle(); 
    $('#img1').toggle(); 
    });

來源

2013-09-30 11:33:06

我不是JQuery的英雄，但希望這可以幫助你的方式：

HTML：

<div class="imageBox"> 
    <img src="..." /> 
    <img src="..." /> 
    <img src="..." /> 
</div>

JQuery的：

$(document).ready(function() { 
    $(".imageBox img").hide(); 
    $(".imageBox img:first-child").show(); 
}); 

$(".imageBox img").on("click", function() { 
    if($(this).next().length > 0) { 
     $(this).hide(); 
     $(this).next().show(); 
    } 
    else { 
     $(this).hide(); 
     $(".imageBox img:first-child").show(); 
    } 
});

而且一個。

來源

2013-09-30 11:43:19 LinkinTED

這很好，試試這個。

$('.full').not(':first').hide(); 
$('.full').click(function(){ 
     $(this).hide(); 
     $(this).next().show(); 
});

Woking Demo

來源

2013-09-30 12:25:59 anand4tech

點擊div隱藏然後顯示頁面上的下一個div？

回答

相關問題