簡單的內容更改。上一頁 - 下一頁更改內容

Question

出於好奇，我想製作類似於幾乎每個圖像滑塊插件的東西..只是沒有內容的自動更改。 （隨着該組DIV中的任何內容）

主要功能是：

1. 隱藏上一頁如果內容是第一。如果內容是Last，則隱藏下一個。
2. 單擊其中一個時，將內容更改爲上一個或下一個。
3. 如果內容不是第一個，則顯示上一個。如果內容只是最後一個，則顯示下一個。

我有隱藏和顯示上一頁和下一頁的問題。 「TEST3」的內容是可見的，然後你按下它使內容消失，這是不可取的但如果隱藏和顯示Prev和Next將工作，這也不會是一個問題。

我想要一些幫助獲得這代碼工作更多或更少。 （無論多麼糟糕的代碼是：d）去有關代碼的crappyness一些技巧將是巨大的，但..

編輯：對...繼承人的代碼：d http://jsfiddle.net/LKFt9/4/

JS：

$(".Content").hide(); 
$('.Content:first').addClass('Cont-active').show(); 
$('.Content:last').addClass('Cont-last'); 
$('.Content:first').addClass('Cont-first'); 

$('.Prev').click(function(){ 
    $('.Content:visible').prev().show().next().hide(); 
}); 
$('.Next').click(function(){ 
    $('.Content:visible').next().show().prev().hide(); 
}); 

    if($('.Cont-first').is(':visible')) { 
     $('.Prev').hide(); 
    } 
    else { $('.Prev').show(); } 

    if($('.Cont-last').is(':visible')) { 
     $('.Next').hide(); 
    } 
    else { $('.Next').show(); } 

HTML：

<div class="Prev">Previous</div> 
    <div class="Content">TEST</div> 
    <div class="Content">TEST2</div> 
    <div class="Content">TEST3</div> 
    <div class="Next">Next</div> 

Answer 1

它看起來像你分配在開始爲一類權，雖然似乎沒有改變或更新。然而，因爲沒有什麼真的似乎使用這個，所以修復可能並不重要。

當函數第一次運行時，它似乎隱藏和顯示上一頁/下一頁按鈕只會執行一次。您可能希望這些在每次點擊時運行。我會建議將它們包裝在一個函數中，並在每次單擊時調用它。試試這個：

$(".Content").hide(); 
$('.Content:first').addClass('Cont-active').show(); 
$('.Content:last').addClass('Cont-last'); 
$('.Content:first').addClass('Cont-first'); 

refreshPaginators(); // needed so that the "Prev" button doesn't show when page first loads, since it isn't being hidden in any other way. 

$('.Prev').click(function(){ 
    $('.Content:visible').prev().show().next().hide(); 
    refreshPaginators(); 
}); 
$('.Next').click(function(){ 
    $('.Content:visible').next().show().prev().hide(); 
    refreshPaginators(); 
}); 

// define a nice function for updating/refreshing the state of Prev/Next buttons which we will want to run anytime the content changes (and also when page first loads). 
function refreshPaginators() { 
    if($('.Cont-first').is(':visible')) { 
     $('.Prev').hide(); 
    } 
    else { 
     $('.Prev').show(); 
    } 
    if($('.Cont-last').is(':visible')) { 
     $('.Next').hide(); 
    } 
    else { 
     $('.Next').show(); 
    } 
} 

祝你好運！