使用next/prev浏览多个div [英] Navigate through multiple divs using next/prev

问题描述

所以基本上我的DIV看起来像这样.

So basically my DIV will look like this.

<div id="group">
    <div id="one">one</div>
    <div style="display:none" id="two">two</div>
    <div style="display:none" id="three">three</div>
    <div style="display:none" id="four">four</div>
</div>
<div id="next">next</div>
<div style="display:none" id="prev">prev</div>
<div style="display:none" id="prev">SUBMIT</div>

这只是一个例子，我什至可以有10或20格.

This is just an example, I could even have 10 or 20 divs.

在此示例中，我想从一导航到四.到达终点时，必须隐藏 next 按钮并显示 submit 按钮.当我导航回首页时，它必须隐藏 prev 按钮

I want to navigate from one to four in this example. When it reaches end it must hide the next button and show submit button. And when I navigate back to first page it must hide the prev button

这是我到目前为止尝试过的:

Here's what I have tried so far:

$("#next").click(function () {
    $("#prev").show();
    $("#one").hide();
    $("#one").addClass("current");
    $(".current").next().addClass("current").show();
    $(".current").prev().removeClass("current").hide();
});

$("#prev").click(function () {
    $("#prev").show();
    $("#one").hide();
    $("#one").addClass("current");
    $(".current").prev().addClass("current").show();
    $(".current").next().removeClass("current").hide();
});

此功能在混乱后可用于某些导航.一些指导将对我和其他人有所帮助.

This works for certain navigation after that it gets messes up. Some guidance will be helpful to me and others.

谢谢

JSFIDDLE: http://jsfiddle.net/aVJBY/450/

JSFIDDLE : http://jsfiddle.net/aVJBY/450/

推荐答案

我看到您有一个答案，但是我建议您使用一种结构化的方法，该方法可以重用单个代码路径:

I see you have an answer, but I would suggest a more structured approach that reuses a single code path:

http://jsfiddle.net/TrueBlueAussie/aVJBY/460/

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    var index = $current.index();
    var newIndex = index+delta;
    // Range check the new index
    newIndex = (newIndex < 0) ? 0 : ((newIndex > $items.length) ? $items.length : newIndex); 
    if (newIndex != index){
        $current.removeClass('current');
        $current = $items.eq(newIndex).addClass('current');
        // Hide/show the next/prev
        $("#prev").toggle(!$current.is($items.first()));    
        $("#next").toggle(!$current.is($items.last()));    
    }
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});

注释:

• 范围上限可以简化，但是您可以理解.
• 您不需要初始化内联样式，因为可以在CSS中完成.
• 这不受内容的任何限制.在这里，我还添加了6个div: http://jsfiddle.net/TrueBlueAussie/aVJBY/463/

• The range capping can be simplified, but you get the idea.
• You do not need to initial inline styling as that can be done in the CSS.
• This is not limited in any way by the content. Here I added 6 more divs: http://jsfiddle.net/TrueBlueAussie/aVJBY/463/

由于我不喜欢页面中初始状态"需要样式的情况，因此这是一个新版本，它也可以正确设置初始状态，而无需 any 初始样式(使用0增量)).我还删除了一个多余的var:

As I do not like situations where styling is required for initial "state" in a page, here is a new version that sets the initial state correctly too without any initial styling (using a 0 delta). I also removed a redundant var:

function updateItems(delta)
{
    var $items = $('#group').children();
    var $current = $items.filter('.current');
    $current = $current.length ? $current : $items.first();
    var index = $current.index() + delta;
    // Range check the new index
    index = (index < 0) ? 0 : ((index > $items.length) ? $items.length : index); 
    $current.removeClass('current');
    $current = $items.eq(index).addClass('current');
    // Hide/show the next/prev
    $("#prev").toggle(!$current.is($items.first()));    
    $("#next").toggle(!$current.is($items.last()));    
}
$("#next").click(function () {
    updateItems(1);
});
$("#prev").click(function () {
    updateItems(-1);
});
// Cause initial selection
updateItems(0);

JSFiddle:: http://jsfiddle.net/TrueBlueAussie/aVJBY/468/

这篇关于使用next/prev浏览多个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！