JQuery onclick div hide/show
JQuery onclick div hide/show
所以我正在尝试 hide/show 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 后注意到的第一件事是它在第一次单击时都没有计算。如果您再次单击下一步，它将通过该函数两次。即使对于后退功能，它也会继续这样做。
我想通过这三个 "pages" 进行索引，并且如果您在第一页和第三页之后，则不提供返回的选项。
谢谢，-Z
我建议更改您的代码，使其动态运行。意思是，如果你添加一个额外的页面，你不需要更多的代码行。
因此改变你的HTML。给所有 div 相同的 class 并将它们放在包装器 div 中（需要定义 eq() 位置）。
那你就可以使用下面我post的脚本了。我评论了这个函数，希望能充分解释它是如何工作的。
$(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>
您看不到不一致输出的原因是 Javascript 和 jQuery
的误用
jQuery 事件
jQuery函数.click()告诉浏览器在每次点击绑定元素时执行回调函数。换句话说，您不应该在 HTML.
中绑定 onclick 属性
Javascript执行
Javascript 从上到下执行脚本。它遇到的任何函数声明都已注册，但 NOT 已执行。
调查犯罪现场
事情就是这样。
- 您的 HTML 页面开始加载
- 浏览器在其他元素之前加载脚本
- 函数已声明但未执行，因此jQuery
click()甚至还未注册
- 已呈现 HTML 文档的其余部分
- 您点击了下一步
- 从您的角度来看没有发生任何事情，但是现在第一次 jQuery
click() 被注册了
- 您再次点击下一步，发生了两次函数调用
- 您的jQuery
click又被注册了
- 执行了
click里面的回调函数，所以你看到页面现在移动了
- 您再次点击下一步，但现在发生了三件事。再次执行第 7 步中的所有内容以及第二次注册的点击。
解决方案
fiddle: 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>
所以我正在尝试 hide/show 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 后注意到的第一件事是它在第一次单击时都没有计算。如果您再次单击下一步，它将通过该函数两次。即使对于后退功能，它也会继续这样做。
我想通过这三个 "pages" 进行索引，并且如果您在第一页和第三页之后，则不提供返回的选项。
谢谢，-Z
我建议更改您的代码，使其动态运行。意思是，如果你添加一个额外的页面，你不需要更多的代码行。
因此改变你的HTML。给所有 div 相同的 class 并将它们放在包装器 div 中（需要定义 eq() 位置）。
那你就可以使用下面我post的脚本了。我评论了这个函数，希望能充分解释它是如何工作的。
$(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>
您看不到不一致输出的原因是 Javascript 和 jQuery
的误用jQuery 事件
jQuery函数.click()告诉浏览器在每次点击绑定元素时执行回调函数。换句话说，您不应该在 HTML.
onclick 属性
Javascript执行
Javascript 从上到下执行脚本。它遇到的任何函数声明都已注册，但 NOT 已执行。
调查犯罪现场
事情就是这样。
- 您的 HTML 页面开始加载
- 浏览器在其他元素之前加载脚本
- 函数已声明但未执行，因此jQuery
click()甚至还未注册 - 已呈现 HTML 文档的其余部分
- 您点击了下一步
- 从您的角度来看没有发生任何事情，但是现在第一次 jQuery
click()被注册了 - 您再次点击下一步，发生了两次函数调用
- 您的jQuery
click又被注册了 - 执行了
click里面的回调函数，所以你看到页面现在移动了
- 您的jQuery
- 您再次点击下一步，但现在发生了三件事。再次执行第 7 步中的所有内容以及第二次注册的点击。
解决方案
fiddle: 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>