jQuery onclick div隐藏/显示

Question

所以我想隐藏/显示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

Answer 1

我建议更改您的代码，使其动态地工作。 意思是，如果您添加了额外的页面，则不需要多一行代码。

因此更改您的HTML。 给所有div相同的类，然后将它们放在包装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>

Answer 2

您看不到输出不一致的原因是由于Javascript和jQuery的滥用

jQuery事件

每次单击绑定元素时，jQuery函数.click()告诉浏览器执行回调函数。 换句话说，您不应在HTML中绑定onclick属性。

Javascript执行

Javascript从上至下执行脚本。 它遇到的任何函数声明都会被注册，但不会执行。

调查犯罪现场

所以这就是发生的事情。

您的HTML页面开始加载
浏览器在其他元素之前加载了脚本
该功能是宣告但尚未执行，因此jQuery的click()甚至没有尚未注册
HTML文档的其余部分已呈现
您单击了下一步
从您的角度来看，什么都没有发生，但是现在是第一次注册jQuery click()
您再次单击了下一步，发生了两个函数调用
- 您的jQuery click已重新注册
- click内部的回调函数已执行，因此您现在看到页面移动
您再次单击下一步，但现在发生了三件事。 再次执行步骤7中的所有操作以及第二次注册的单击。

解

小提琴： 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>

jQuery onclick div隐藏/显示

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-07-31 14:23:38

解决方案2
0 2015-07-31 14:38:57

jQuery事件

Javascript执行

调查犯罪现场

解

jQuery onclick div隐藏/显示

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-07-31 14:23:38

解决方案2 0 2015-07-31 14:38:57

jQuery事件

Javascript执行

调查犯罪现场

解

解决方案1
0 已采纳 2015-07-31 14:23:38

解决方案2
0 2015-07-31 14:38:57