Question

我只是试图制作一个使用jQuery上下滑动的按钮，但它只有50％的时间工作。当我按下＃34;向上滑动＆＃34;它确实有效，但它不适用于＆＃34;向下滑动＆＃34;。它也没有给我任何错误......

这是我的代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
        var test = true
        var test2 = false
        if(test == true){
            $(document).ready(function(){
                $(".btn1").click(function(){
                    $("p").slideUp();
                });
            });
        }
        else if(test2 == false){
            $(document).ready(function(){
                $(".btn2").click(function(){
                    $("p").slideDown();
                });
            });
        }
        </script>
    </head>
    <body>
    <p>Hello Uranus</p>
        <button class="btn1">Slide up</button>
        <button class="btn2">Slide down</button>
    </body>
</html>

我认为我忽略了某些事情，或者我只是在编码，但任何帮助将不胜感激！

Answer 1

您可以简单地使用jQuery .slideToggle()：

$('.btn').on('click', function(){
    $('p').slideToggle();
});

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    
<p>Hello Uranus</p>
<button class="btn">Slide Up/Down</button>

Answer 2

删除＆＃34; else＆＃34;来自你的代码

Answer 3

看一下基本的javascript开发;）

If - Else

如果您的第一个条件为真，则else将不会执行。如果你想让你的所有按钮正常工作：

 $(document).ready(function(){
            $(".btn1").click(function(){
                $("p").slideUp();
            });
            $(".btn2").click(function(){
                $("p").slideDown();
            });
        });
    }

Answer 4

删除if和else。看看这个：

https://jsfiddle.net/wnwrnbw7/

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script>
  $(document).ready(function(){
    $(".btn1").click(function(){
      $("p").slideUp();
    });
    $(".btn2").click(function(){
          $("p").slideDown();
    });
  });
  </script>
<body>
  <p>Hello Uranus</p>
  <button class="btn1">Slide up</button>
  <button class="btn2">Slide down</button>
</body>

Answer 5

条件是阻止这种情况发生。只需完全删除条件。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $(".btn1").click(function(){
                    $("p").slideUp();
                });
            });

            $(document).ready(function(){
                $(".btn2").click(function(){
                    $("p").slideDown();
                });
            });
        </script>
    </head>
    <body>
    <p>Hello Uranus</p>
        <button class="btn1">Slide up</button>
        <button class="btn2">Slide down</button>
    </body>
</html>

Answer 6

您犯了很多syntax个错误，以及logical。所以，我已经解决了这些问题。请用我的脚本替换你的脚本::

$(document).ready(function () {
        $(".btn1").click(function () {
            $("p").slideUp();
        });
        $(".btn2").click(function () {
            $("p").slideDown();
        });
    });

Answer 7

        <!DOCTYPE html>
    <html>
     <head>
         <meta charset="UTF-8">

     </head>
     <body>
     <p>Hello Uranus</p>
         <button class="btn1">Slide up</button>
         <button class="btn2">Slide down</button>
     </body>
     <script src="../public/js/jq.js" charset="utf-8"></script>
     <script>
      function toggle(flag){
        if (flag ==1) {
          $('p').slideUp();
        }else {
          $('p').slideDown();
        }
      }
      $('.btn1').click(function(){
        toggle(1);
      });
      $('.btn2').click(function(){
        toggle(0);
      });
     </script>

</html>

注意：请尝试使用此代码包含jquery文件。

我的脚本无法正常工作，也不会抛出错误

7 个答案: