Jquery - 逐個顯示div

當用戶點擊previous和next標籤時，我需要逐個顯示多個div（創建爲dinamically）。Jquery - 逐個顯示div

我曾嘗試：

HTML：

<div style="display: none;" id="panel_steps_page1" class="pages page1"> </div> 
<div style="display: none;" id="panel_steps_page2" class="pages page2"> </div> 
<div style="display: none;" id="panel_steps_page3" class="pages page3"> </div> 
<div style="display: none;" id="panel_steps_page4" class="pages page4"> </div> 

<span id="btn_previous" class="previous">previous</span> 
<span id="Span1" class="next">next</span>

的Jquery：

$(".page1").show(); 

$(".next").click(function(e) { 
    $(".pages").each(function(index) { 

     if ($(".page" + index).is(":visible")) { 
      $(".page" + index).hide(); 
      $(".page" + (index + 1)).show(); 
     } 
    }); 

}); 

$(".previous").click(function(e) { 
    $(".pages").each(function(index) { 
     if ($(".page" + index).is(":visible")) { 
      $(".page" + index).hide(); 
      $(".page" + (index - 1)).show(); 
     } 
    }); 
});

它不工作，雖然。

Live jsfiddle

來源

2013-03-06 enb081

爲什麼不工作？ – Liam 2013-03-06 10:43:21

@Liam'上一個'按鈕不起作用，'next'按鈕立即顯示最後一個div – enb081 2013-03-06 10:46:27

的代碼是過於複雜。這裏有一個更簡單的版本，幾乎朗讀一樣，它的工作原理：

$(".next").click(function() { 
    $(".pages:visible").hide().next().show(); 
}); 

$(".previous").click(function() { 
    $(".pages:visible").hide().prev().show(); 
});

以上是一個很好的起點，但它可以結束了隱藏所有的div的，如果你試圖走出界外。這個問題可以固定一個小的調整：

$(".next").click(function() { 
    $(".pages:visible").hide().next(".pages").addBack().last().show(); 
}); 

$(".previous").click(function() { 
    $(".pages:visible").hide().prev(".pages").addBack().first().show(); 
});

See it in action。

更新：編輯的代碼（但不是小提琴），以基於以下insertusernamehere的評論與.addBack()取代.andSelf()。

來源

2013-03-06 10:47:28 Jon

如何處理第一個和最後一個元素？因爲如果我在第一個div可見時單擊'previous'，或者在最後一個div可見時單擊'next'，所有div將消失並且不再顯示。 jsfiddle：http://jsfiddle.net/umtMC/1/ – enb081 2013-03-06 10:50:40

@ enb081看看我的答案。有這個問題的解決方案 – Kasyx 2013-03-06 10:53:38

@ enb081：更新了答案以表明這一點。 – Jon 2013-03-06 10:54:44

這段代碼將避免隱藏最後一頁或第一頁。它可以防止不顯示頁面的情況。

$(document).ready(function(){ 
    $(".page1").show(); 

    $(".next").click(function(e) { 
     var next = $(".pages:visible").next(".pages"); 
     if(next.length >0){ 
      $(".pages:visible").hide(); 
      next.show(); 
     } 
    }); 

    $(".previous").click(function(e) { 
     var prev = $(".pages:visible").prev(".pages"); 
     if(prev.length > 0){ 
      $(".pages:visible").hide(); 
      prev.show(); 
     } 
    }); 
});

工作實例：http://jsfiddle.net/envDx/1/

來源

2013-03-06 10:51:26

是的，它工作正常。謝謝 – enb081 2013-03-06 10:53:17

@ enb081很高興我能幫上忙。如果您有任何其他問題，請告訴我。 – 2013-03-06 10:53:37

還有就是你的更新Fiddler。

$(".next").click(function(e) { 
    var $visibleOne = $(".pages:visible"); 
    var $nextToBeVisible = $visibleOne.next('div.pages'); 

    if($nextToBeVisible.length > 0) { 
     $visibleOne.hide(); 
     $nextToBeVisible.show(); 
    } 

}); 

$(".previous").click(function(e) { 
    var $visibleOne = $(".pages:visible"); 
    var $PrevToBeVisible = $visibleOne.prev('div.pages'); 

    if($PrevToBeVisible.length > 0) { 
     $visibleOne.hide(); 
     $PrevToBeVisible.show(); 
    } 
});

來源

2013-03-06 10:52:26 Kasyx

$(".next, .previous").click(function(e) { 
    var $p = $('.pages:visible'), 
     m = this.className == 'next' ? 'next' : 'prev'; 
    if ($p[m]('.pages').length) $p.hide()[m]().show(); 
});

http://jsfiddle.net/xMaZQ/

來源

2013-03-06 10:53:45 undefined

這也是一個非常好的答案 – enb081 2013-03-06 11:00:00

我使用的另一種溶液，更優化，因爲我避免每個迭代。

$(".next").click(function(e) { 
    var shown = $(".pages.visible").hide().removeClass('visible'); 
    var index = (shown.index() + 1) % 4; 

    $(".page"+index).show().addClass('visible'); 
}); 

$(".previous").click(function(e) { 
    var shown = $(".pages.visible").hide().removeClass('visible'); 
    var index = shown.index(); 
    index = (index == 0)? 3: index - 1; 

    $(".page"+index).show().addClass('visible'); 
});

試試我的解決方案here，讓我知道，如果你的作品

來源

2013-03-06 11:02:58 Guern

謝謝，它工作正常，+1從最後一步返回到第一個（不需要在我的情況下，但是，無論如何，謝謝）。 – enb081 2013-03-06 11:05:41

Jquery - 逐個顯示div

回答

相關問題