所以基本上我的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>
这只是一个例子，我甚至可以有10或20个div。
我希望在此示例中从一到四导航。当它到达结束时，它必须隐藏next按钮并显示submit按钮。当我导航回第一页时，它必须隐藏prev按钮
这是我到目前为止所尝试的内容：
$("#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();
});
这适用于某些导航后，它会变得混乱。一些指导对我和其他人都有帮助。
由于
JSFIDDLE：http://jsfiddle.net/aVJBY/450/
答案 0 :(得分：3)
我看到你有答案，但我建议采用更加结构化的方法重用单一的代码路径：
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);
});
备注：
因为我不喜欢初始状态需要造型的状态＆＃34;状态＆＃34;在页面中，这是一个新版本，无需任何初始样式（使用0 delta），也可以正确设置初始状态。我还删除了一个冗余的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);
答案 1 :(得分：1)
也许在代码下面帮助你。
再次更新......
$( "#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();
});
答案 2 :(得分：1)
我也想建议这种方法，因为我发现问题已经解决了：
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);
}
答案 3 :(得分：1)
我正在展示另一种方法，您可以将当前项目设置为任意元素，并相应地显示next prev箭头。
$(function() {
var updateDiv = function(trigger) {
var currentDiv = $(".current");
$("#group div").removeClass("current").hide();
if (trigger.hasClass("next") && currentDiv.next("div").length > 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 = function() {
var intialDiv = $(".current");
intialDiv.show();
var intialDivIndex = intialDiv.index();
intialDivIndex > 0 ? $("#prev").show() : $("#prev").hide();
intialDivIndex < totalDivs - 1 ? $("#next").show() : $("#next").hide();
};
var totalDivs = $("#group div").length;
updateNavigation();
$("#next, #prev").on("click", function() {
updateDiv($(this));
});
});#group div {
border: 1px solid red;
width: 100px;
height: 100px;
}
#next {
margin-left: 100px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="group">
<div id="one" style="display:none">one</div>
<div style="display:none" id="two">two</div>
<div style="display:none" id="three">three</div>
<div style="display:none" id="four" class="current">four</div>
<div style="display:none" id="five">five</div>
<div style="display:none" id="six">six</div>
<div style="display:none" id="seven">seven</div>
<div style="display:none" id="eight">eight</div>
</div>
<div id="next" style="display:none" class="next">next</div>
<div style="display:none" id="prev" class="prev">prev</div>
<div style="display:none" id="prev">SUBMIT</div>
答案 4 :(得分：0)
您应创建一个功能，以便在点击时隐藏或显示上一个和下一个按钮。您可以使用jQuery的.index()函数来检查当前div是否是div＃group中的第一个或最后一个项目
$(function(){
var $cur = $('#group .current');
var $items = $('#group .item');
function hideButtons() {
$cur = $('#group .current');
var index = $cur.index();
if(index > 0) {
$('#prev').show();
} else {
$('#prev').hide();
}
if(index < $items.length - 1) {
$('#next').show();
} else {
$('#next').hide();
}
}
hideButtons();
$('#next').click(function(){
$cur.next().addClass('current');
$cur.removeClass('current');
hideButtons();
});
$('#prev').click(function(){
$cur.prev().addClass('current');
$cur.removeClass('current');
hideButtons();
});
});.item {
display: none;
}
.item.current {
display: block;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="group">
<div id="one" class="current item">one</div>
<div id="two" class="item">two</div>
<div id="three" class="item">three</div>
<div id="four" class="item">four</div>
</div>
<button id="next">next</button>
<button style="display:none" id="prev">prev</button>