Javascript 使用next/prev在多个div中导航

所以基本上我的DIV是这样的

<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>

这适用于某些导航，在它出错之后。一些指导对我和其他人都有帮助

谢谢

---

jsiddle:

下面的代码可能会对您有所帮助

更新。。。再次

$( "#next" ).click(function() {
    if($(".current").length!=1){
        $( "#group:first-child" ).addClass("current");
    }

    $(".current").removeClass("current").hide().next().addClass("current").show(); 

    if($(".current").next().length!=1){
        $( "#next" ).hide();
    }

    $( "#prev" ).show();  
});


$( "#prev" ).click(function() {
    if($(".current").length!=1){
        $( "#group:last-child" ).addClass("current");
    }

    $(".current").removeClass("current").hide().prev().addClass("current").show(); 

    if($(".current").prev().length!=1){
        $( "#prev" ).hide();
    }

    $( "#next" ).show();
});

---

我知道您有答案，但我建议采用一种更结构化的方法，重用单个代码路径：

函数更新项（增量）
{
var$items=$（'#group'）.children（）；
var$current=$items.filter（'.current'）；
var index=$current.index（）；
var newIndex=指数+增量；
//检查新索引的范围
newIndex=（newIndex<0）？0:（（newIndex>$items.length）？$items.length:newIndex）；
if（newIndex！=索引）{
$current.removeClass（'current'）；
$current=$items.eq（newIndex.addClass（'current'）；
//隐藏/显示下一个/上一个
$（“#prev”）.toggle（！$current.is（$items.first（））；
$（“#下一步”）.toggle（！$current.is（$items.last（））；
}
}
$（“#下一步”）。单击（函数（）{
更新项目（1）；
});
$（“#prev”）。单击（函数（）{
更新项（-1）；
});

注意事项：

• 范围上限可以简化，但你明白了
• 您不需要初始内联样式，因为这可以在CSS中完成
• 这不受内容的任何限制。在这里，我又添加了6个div：

更新 由于我不喜欢页面中初始“状态”需要样式的情况，这里有一个新版本，它也可以正确设置初始状态，而不需要任何初始样式（使用0增量）。我还删除了一个冗余变量：

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

函数更新项（增量）
{
var$items=$（'#group'）.children（）；
var$current=$items.filter（'.current'）；
$current=$current.length？$current:$items.first（）；
var index=$current.index（）+delta；
//检查新索引的范围
索引=（索引<0）？0:（（索引>$items.length）？$items.length:index）；
$current.removeClass（'current'）；
$current=$items.eq（index.addClass（'current'）；
//隐藏/显示下一个/上一个
$（“#prev”）.toggle（！$current.is（$items.first（））；
$（“#下一步”）.toggle（！$current.is（$items.last（））；
}
$（“#下一步”）。单击（函数（）{
更新项目（1）；
});
$（“#prev”）。单击（函数（）{
更新项（-1）；
});
//原因初选
更新项（0）；

---

jsiddle:

我还想建议这种方法，尽管我看到问题已经解决了：

var $divs = $("#group").children("div"),
    index = 0;

$("#next").click(function () {
    updateStatus(1);
});

$("#prev").click(function () {
    updateStatus(-1);
});

function updateStatus(a) {

    $divs.eq(index).removeClass("current").hide();
    index += a;
    $divs.eq(index).addClass("current").show();

    $("#next").toggle(index !== $divs.length - 1);
    $("#prev").toggle(index !== 0);
}

---

您应该创建一个函数，在单击时隐藏或显示上一个和下一个按钮。您可以使用jQuery的

.index（）

函数检查当前div是div组中的第一项还是最后一项

$（函数（）{
var$cur=$（“#group.current”）；
var$items=$（“#group.item”）；
函数hideButtons（）{
$cur=$（“#group.current”）；
var index=$cur.index（）；
如果（索引>0）{
$（'#prev'）.show（）；
}否则{
$（'#prev'）.hide（）；
}
如果（索引<$items.length-1）{
$（“#下一步”）.show（）；
}否则{
$（“#下一步”）.hide（）；
}
}
隐藏按钮（）；
$（“#下一步”）。单击（函数（）{
$cur.next（）.addClass（'current'）；
$cur.removeClass（'current'）；
隐藏按钮（）；
});
$（'#prev'）。单击（函数（）{
$cur.prev（）.addClass（'current'）；
$cur.removeClass（'current'）；
隐藏按钮（）；
});
});
.item{
显示：无；
}
.item.current{
显示：块；
}

一
二
三
四
下一个
prev
我正在展示另一种方法，您可以将当前项设置为任何元素，它将相应地显示下一个prev

箭头

$（函数（）{
var updateDiv=函数（触发器）{
var currentDiv=$（“.current”）；
$（“#组div”）.removeClass（“当前”）.hide（）；
if（trigger.hasClass（“下一个”）和currentDiv.next（“下一个”）长度>0）{
currentDiv.next（“div”）.addClass（“current”）.show（）；
}else if（trigger.hasClass（“prev”）和currentDiv.prev（“div”）.length>0）{
currentDiv.prev（“div”）.addClass（“current”）.show（）；
}
updateNavigation（）；
};
var updateNavigation=函数（）{
var intialDiv=$（“.current”）；
intialDiv.show（）；
var intialDivIndex=intialDiv.index（）；
intialDivIndex>0？$（“#prev”）.show（）：$（“#prev”）.hide（）；
intialDivIndex
#组分区{
边框：1px纯红；
宽度：100px；
高度：100px；
}
#下一个{
左边距：100px；
}

一
二
三
四
五
六
七
八
下一个
上
提交
其工作状态，但当它达到“四”时，它仍显示“下一步”按钮，当它达到“一”时，同样显示“上一步”按钮我的答案已更新再次检查。。。我有一些失误对不起，你为什么要用第四组？我说过我甚至可以有10或20个DIV我刚刚注意到答案标记为use the DIV four，让我检查一下你的解决方案完美的解决方案，这将帮助很多人，因为在互联网上，对于这个简单的任务来说都很复杂..+1嘿，我有一个问题，如何找到它的结束或开始？我想在结尾和开头添加一些额外的按钮，如果您理解上面的代码，这应该非常清楚。。对于没有经验的ppl来说，这可能更清楚一些：@Vishnu:
$current.is（$items.first（））
说“是第一个被选中的”<代码>$current.is（$items.last（））

显示“是最后选择的”。如果您想再次使用这些值，请将它们保存到var中：）我看到您的想法与我的想法相同。建议您在jQuery中开始使用

divs.eq（index）

而不是

$（divs[index]）

。还有“加”和“减”作为字符串？？？错过了一个技巧（+1/-1）：）是的，很好

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

var $divs = $("#group").children("div"),
    index = 0;

$("#next").click(function () {
    updateStatus(1);
});

$("#prev").click(function () {
    updateStatus(-1);
});

function updateStatus(a) {

    $divs.eq(index).removeClass("current").hide();
    index += a;
    $divs.eq(index).addClass("current").show();

    $("#next").toggle(index !== $divs.length - 1);
    $("#prev").toggle(index !== 0);
}