Question

出于好奇，我想制作类似于几乎每个图像滑块插件的东西......只是没有自动更改内容。（对于设置div中的任何内容。）

主要功能是：

如果内容为First，则隐藏上一个。如果内容为Last，则隐藏Next。
单击其中一个内容时，将内容更改为上一个或下一个。
如果内容不是第一个，则显示上一个。如果内容不是最后一个，则显示“下一步”。

我在隐藏和显示Prev和Next时遇到问题。 在“TEST3”内容可见后按下它会使内容消失，这是不可取的但是如果隐藏和显示Prev和Next会起作用，这也不会成为问题。

我喜欢一些帮助，让此代码更多或更少。（无论代码多么糟糕：D）关于代码蹩脚的一些提示虽然很好..

编辑：对...代码：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

看起来你正在为Cont-active开头分配一个类，尽管似乎没有任何改变或更新。但是，由于似乎没有真正使用它，修复它可能并不重要。

当首次运行该功能时，您的上一个/下一个按钮的隐藏和显示似乎只进行一次。您可能希望每次单击它们时都运行它们。我建议将它们包装在一个函数中，并在每次单击时调用它。试试这个：

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

祝你好运！

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

1 个答案: