简单的内容更改。上一页 - 下一页更改内容

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(); 
    } 
} 

祝你好运！