Question

我试图实现某些功能，当我单击该段落时，我的第一个功能将运行，然后再次单击该段落，第二个功能将运行，然后再次单击该段落，第三个功能将运行，依此类推。不是当我点击段落所有的功能都会运行时，我只达到了第二个功能，现在我已经卡住了。

这是代码..

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jQuery/1.12.2/jquery.min.js"></script>
<script>
$().ready(function(){
    $("h1").hide();
    $("h2").hide();
    $("h3").hide();

    function func1(){
        $("h1").show();
    }
    function func2(){
        $("h2").show();
    }

    function func3(){
        $("h3").show();
    }

    function funcme(){
        if($("p").click(func1)){

            $("h1").show();
            $(this).click(func2);
        }

    }
$(this).click(func3);
    $("p").click(funcme);

});

</script>
</head>
<body>

<p>CLICK ME</p>
<h1>FUNC 1</h1>
<h2>FUNC 2</h1>
<h3>FUNC 3</h1>

</body>
</html>

Answer 1

这可能是一个更优雅的解决方案？

<!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script>
     $().ready(function(){
        var counter = 0;

        $('.section').hide();


        $(".func-me").on('click', function (event){
           $('.section').eq(counter).show();
           counter++;
        });
    });

    </script>
    </head>
    <body>


    <button class="func-me">CLICK ME</button>
    <p class="section">FUNC 1</p>
    <p class="section">FUNC 2</p>
    <p class="section">FUNC 3</p>

    </body>
    </html>

https://jsfiddle.net/vnavv1v7/

Answer 2

您是否尝试制作旗帜？例如，您的标志设置为零。然后你第一次点击，将你的旗帜改为1.然后你进行第二次点击，将你的旗帜改为2 ......依此类推......

我不明白你在每次点击时需要做什么..但我觉得这样......

<script>
   $(document).ready(function(){
      $("h1").hide();
      $("h2").hide();
      $("h3").hide();

      var flag = 0;

      $("p").click(funcme(flag)); 

      function funcme (flag){
          if (flag == 0)
             func1();
          if (flag == 1)
             func2();
          if (flag == 2)
             func3();
          flag++;
      }

      function func1(){
          $("h1").show();
      }

      function func2(){
          $("h2").show();
      }

     function func3(){
         $("h3").show();
     }
  }
</script>

jQuery - 单击然后显示功能，然后再次单击并显示另一个功能等等。未单击并显示所有功能

2 个答案: