所以我试图隐藏/显示3个不同的div。我想跟踪哪一个显示，以便我可以有下一个和后一个功能。这是我到目前为止所做的：
<!DOCTYPE html>
<html>
<head>
<title><cfoutput>#getgame.name# - Introduction</cfoutput></title>
<link rel="stylesheet" type="text/css" href="css/sigmasim.css">
<link rel="stylesheet" href="css/fonts.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".content2").hide();
$(".content3").hide();
});
var i = 0;
var j = 0;
function Back(){
$("#target1 a").click(function(){
if (i != 0){
j = i - 1;
i = i - 1;
if (j == 0){
$(".content").show();
$(".content2").hide();
$(".content3").hide();
} else if (j == 1){
$(".content").hide();
$(".content2").show();
$(".content3").hide();
} else {
$(".content").show();
$(".content2").hide();
$(".content2").hide();
}
}
});
}
function Next(){
$("#target2 a").click(function(){
if (j != 4){
j = i + 1;
i = i + 1;
if (j == 1){
$(".content").hide();
$(".content2").show();
$(".content3").hide();
} else if (j == 2){
$(".content").hide();
$(".content2").show();
$(".content3").hide();
} else if (j == 3){
$(".content").hide();
$(".content2").hide();
$(".content2").show();
} else {
$(".content").show();
$(".content2").hide();
$(".content2").hide();
}
}
});
}
</script>
</head>
<body>
<div class="content">
<p> hi </p>
</div>
<div class="content2">
<p> hi2 </p>
</div>
<div class="content3">
<p> hi3 </p>
</div>
<div style="display: inline-block; width: 50%; text-align: left; font-size: 24px;" id="target1">
<a href="#" onclick="javascript:Back();">Back</a>
</div><div style="display: inline-block; width: 50%; text-align: right; font-size: 24px;" id="target2">
<a href="#" onclick="javascript:Next();">Next</a>
</div>
</body>
</html>
点击下一步后，我在向i和j添加console.log后注意到的第一件事是它在第一次点击时都没有评估。如果再次单击“下一步”，它将通过该功能两次。即使对于后退功能，它仍然继续这样做。
我想在三个“页面”中进行索引，如果您在第一页上，则不提供返回选项，并且如果超过第三页则相同。
谢谢，-Z
答案 0 :(得分：0)
我建议您更改代码，以便动态运行。这意味着，如果添加额外页面，则不需要x行代码。
因此更改您的HTML。给所有divs提供相同的类并将它们放在一个包装器div中（需要定义eq()位置）。
然后你可以使用我在下面发布的脚本。我评论了这个功能，希望能够解释它的工作原理。
$(function() {
$('.content:not(:first), #back').hide(); /* hide all divs except first, and hide #back button */
$('.content:first').addClass('active'); /* add a class to the first and active div */
$('#back, #next').on('click', function(e) {
e.preventDefault(); /* prevent anchor from firing */
var dir = $(this).prop('id'); /* define the direction */
var active = $('.content.active'); /* find active item */
var newActive = (dir == 'next') ? active.index() + 1 : active.index() - 1; /* define the new active page */
active.removeClass('active').hide() /* remove active state from the old page and hide it */
$('.content').eq(newActive).addClass('active').show(); /* add active state to the new page and show it */
$('#next').toggle( newActive < $('.content').length-1 ); /* hide the next button if there are no next pages */
$('#back').toggle( newActive > 0 ); /* hide the back button if there are no prev pages */
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="back">back</a> <a href="#" id="next">next</a>
<div>
<div class="content">
<p> hi </p>
</div>
<div class="content">
<p> hi2 </p>
</div>
<div class="content">
<p> hi3 </p>
</div>
</div>
答案 1 :(得分：0)
您没有看到输出不一致的原因是因为误用了Javascript和jQuery
jQuery函数.click()告诉浏览器每次单击绑定元素时都执行回调函数。换句话说，您不应该绑定HTML中的onclick属性。
Javascript从上到下执行脚本。它遇到的任何函数声明都已注册但 NOT 已执行。
所以这就是发生的事。
click()甚至尚未注册click()首次注册click已重新注册click内的回调函数，因此您现在看到页面移动小提琴：http://jsfiddle.net/whrqwgrz/3/
$(document).ready(function () {
$(".content2").hide();
$(".content3").hide();
var i = 0;
var j = 0;
$("#target1 a").click(function () {
if (i != 0) {
j = i - 1;
i = i - 1;
if (j == 0) {
$(".content").show();
$(".content2").hide();
$(".content3").hide();
} else if (j == 1) {
$(".content").hide();
$(".content2").show();
$(".content3").hide();
} else {
$(".content").show();
$(".content2").hide();
$(".content3").hide();
}
}
});
$("#target2 a").click(function () {
if (j != 2) {
j = i + 1;
i = i + 1;
if (j == 1) {
$(".content").hide();
$(".content2").show();
$(".content3").hide();
} else if (j == 2) {
$(".content").hide();
$(".content2").hide();
$(".content3").show();
}
}
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="content">
<p>hi</p>
</div>
<div class="content2">
<p>hi2</p>
</div>
<div class="content3">
<p>hi3</p>
</div>
<div style="display: inline-block; width: 50%; text-align: left; font-size: 24px;" id="target1"> <a href="#">Back</a>
</div>
<div style="display: inline-block; width: 50%; text-align: right; font-size: 24px;" id="target2"> <a href="#">Next</a>
</div>