Question

我有以下代码，我试图对一个段落应用盲目效果，但它没有发生：

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <script>
         $('#but1').click(function(){
            $('p').toggle('blind');
         });
      </script> 
   </head>
   <body>
      <button id="but1">Click Me!</button> 
      <p>This is a paragraph.</p>
   </body>
</html>

任何人都可以指出我做错了什么吗？

Answer 1

使用

$(document).ready(function() {
    $('#but1').click(function() {
        $('p').toggle('blind');
    });
});

或将你的脚本放在最后，即

之前

<html>
   <head>
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
   </head>
   <body>
      <button id="but1">Click Me!</button> 
      <p>This is a paragraph.</p>
      <script>
         $('#but1').click(function(){
             $('p').toggle('blind');

         });
      </script> 
   </body>
</html>

Answer 2

将您的代码包裹在ready。

在您的代码中，click事件未受约束，因为#but1元素在DOM执行时不可用。

$(document).ready(function() {
    $('#but1').click(function() {
        $('p').toggle('blind');
    });
});

jQuery UI盲效无效

2 个答案: