JQuery onclick div 隐藏/显示答案

【问题标题】：JQuery onclick div hide/showJQuery onclick div 隐藏/显示
【发布时间】：2015-07-31 13:52:48
【问题描述】：

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

【问题讨论】：

标签： jquery function onclick

【解决方案1】：

我建议您更改您的代码，以便它可以动态运行。意思是，如果你添加一个额外的页面，你就不需要多 x 行代码了。

因此更改您的 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>

【讨论】：

感谢大家的快速回复。是的，我刚刚开始学习 JQuery 和 JS。阅读您的 cmets 后，您的代码才有意义。非常有帮助，谢谢！

【解决方案2】：

你看不到输出不一致的原因是因为滥用了 Javascript 和 jQuery

jQuery 事件

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

Javascript 执行

Javascript 从上到下执行脚本。它遇到的任何函数声明都已注册但未执行。

调查犯罪现场

所以这就是发生的事情。

您的 HTML 页面开始加载
浏览器先于其他元素加载脚本
函数已声明但未执行，因此 jQuery click() 甚至还没有注册
HTML 文档的其余部分已呈现
您点击了下一步
从您的角度来看，没有发生任何事情，但现在 jQuery click() 首次注册
你再次点击next，发生了两个函数调用
- 您的 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>

【讨论】：

感谢您的帮助。这些步骤帮助我了解我做错了什么。不过我看了你的答案，当你到达三个后点击下一个按钮然后点击后退按钮时，它会直接跳到第一个 div 而不是去 div2
也只是为了鼓励熟悉其他简单的 jQuery 方法，我建议看看jsfiddle.net/whrqwgrz/2