在多個div之間切換可見性

我試圖找到最簡單的JS解決方案，最好是jQuery，來完成以下任務：我有多個div，全部具有相同的類，我只想簡單地切換每個可見性，一次一個。在多個div之間切換可見性

<a href="#" id="toggle-trigger">Toggle Div Visibility</a>  
<div class="slide" id="slide-one"></div> 
<div class="slide" id="slide-two"></div> 
<div class="slide" id="slide-three"></div> 
<div class="slide" id="slide-four"></div> 
<div class="slide" id="slide-five"></div>

第一個div，默認情況下，通過CSS始終可見。

.slide{ 
display:none; 
} 
#slide-one{ 
display:block; 
}

我一直無法找到任何東西，只是在兩個元素之間切換，而不是多個項目。請讓我知道我是否可以在其他地方找到答案。由於

來源

2012-06-21 Joel Eckroth

你能解釋一下你期望看到的行爲嗎？ – Baz1nga

是這樣的嗎？

$('#toggle-trigger').click(function() 
    { 
    var $Current = $('.slide:visible'); 
    var $Slides = $('.slide'); 
    var $Next = $Current.next(); 
    if ($Next.length == 0) $Next = $Slides.first(); 
    $Slides.hide(); 
    $Next.show(); 
    });

我做了一個的jsfiddle吧：http://jsfiddle.net/uxqBx/

來源

2012-06-21 12:34:45 Wivlaro

是的，謝謝！這一個完美工作。 –

我寫了一段時間:) – totten

我很挑剔，但你爲什麼要給你添加一個美元符號變量名？ – senfo

嘗試：

$('.slide').each(function(){ 
    $(this).show().prev().hide(); 
});

或者，如果你想進行計時：

$('.slide').each(function(i){ 
    var elt = this; 
    setTimeout(function(){$(elt).show().prev().hide()},i*1000); 
});

錯誤的答案

現在作爲一個幻燈片：

var current; 
$(function(){ 
    current = $('.slide').first(); 
    SetInterval(function(){ 
     var next = $(current).next('.slide'); 
     if(next.length == 0) 
       current = $('.slide').first(); 
     $(current).hide(); 
     $(next).show(); 
    },1000);

編輯︰加入切換，我以爲你想要div顯示一個接一個，但保持可見性。現在它應該切換。

來源

2012-06-21 12:29:27 TecHunter

您可以在第一個代碼中添加一個延遲，使其與第二個代碼類似。 –

它不會切換 – vittore

aaah，對，ok –

對不起，出了點問題，我遲到了。 - http://jsfiddle.net/ZEBza/

$("#toggle-trigger").click(function() { 
    var opened=""; 
    $(".slide").each(function(i, el) { 
     console.log(opened); 
     var pass = true; 
     if(opened!="") 
     { 
     $(el).css("display", "block"); 
     opened = ""; 
     pass = false; 
     } 
     if($(el).css("display")=="block" && pass) 
     { 
     opened = $(el).attr("id"); 
     $(el).css("display", "none"); 
     } 
    }); 
    if(opened!="") 
    { 
     $(".slide:first").css("display", "block"); 
    } 
});

來源

2012-06-21 12:29:50 totten

即使Wivlaro回答了這個問題，這裏有不同的方式，使用類有源元件，而不是:visible僞選擇。

example on jsfiddle

來源

2012-06-21 12:51:46 vittore

是的，我確實更喜歡這個版本。謝謝！ –

在多個div之間切換可見性

回答

相關問題