jQuery的幫助無法得到它的工作

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
    <html> 
 
    <head> 
 
     <title>YES</title> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
 
    </head> 
 
    
 
    <body> 
 
     
 
     
 
     
 
     <img id="dramatic" src="statefair.jpg" width="400px" height="400px"> 
 
     <br> 
 
     <button id="make_visible">HIDE</button> 
 
     
 
     
 
     <style> 
 
      img#dramatic { 
 
      display: none; 
 
      } 
 
     </style> 
 
     
 
     
 
     <script> 
 
     
 
     $("button#make_visible").on("click", function() { 
 
     $("img#dramatic").slideDown(); 
 
     }); 
 
     
 
     </script> 
 
</body> 
 
</html>

我一本書的工作，並在書中我正在學習jQuery的了slideDown /向上方法。我最初在我的主網頁上運行代碼，它不會工作。所以我只是創建了一個簡單的YES.html（見上文），以確保我的編碼正確。但它不會向上或向下滑動圖像。我不知道我錯過了什麼工作。我是初學者，所以我可能會錯過簡單的東西。請儘可能在步驟中解釋您的答案/解決方案，或者可能引導我進入某種網頁教程。謝謝。

來源

2017-10-08 MVR

你在找這樣的事情？

$('#make_visible').on('click', function (e) { 
 
    /* method 1 */ 
 
    /*if ($('#dramatic').css('display') === 'none') { 
 
    $('#dramatic').slideDown(); 
 
    $(this).html('Hide'); 
 
    } 
 
    else { 
 
    $('#dramatic').slideUp(); 
 
    $(this).html('show'); 
 
    }*/ 
 
    /* method 2 */ 
 
    $('#dramatic').slideToggle(); 
 
    this.innerHTML = this.innerHTML == 'HIDE' ? 'SHOW' : 'HIDE'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="make_visible">HIDE</button> 
 
<br /> 
 
<img id="dramatic" src="statefair.jpg" width="400px" height="400px" />

來源

2017-10-08 19:16:34

哇，謝謝。這爲如何基於這個小代碼片段使用jquery提供了很多想法。 – MVR

如果我的答案解決了您的問題，請接受它作爲答案。 –

您沒有導入jQuery，要使用jQuery UI，您必須先導入jQuery。認爲，這有助於：

 <!DOCTYPE html> 
     <html> 
     <head> 
      <title>YES</title> 
      <script 
        src="https://code.jquery.com/jquery-3.2.1.js" 
        integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" 
        crossorigin="anonymous"></script> 
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script> 
     </head> 

     <body> 



      <img id="dramatic" src="statefair.jpg" width="400px" height="400px"> 
      <br> 
      <button id="make_visible">HIDE</button> 


      <style> 
       img#dramatic { 
       display: none; 
       } 
      </style> 


      <script> 

      $("button#make_visible").on("click", function() { 
      $("img#dramatic").slideDown(); 
      }); 

      </script> 
    </body> 
</html>

來源

2017-10-08 19:12:32 Griffi0n

你也應該改進HTML – Griffi0n

嘿感謝您的標籤安置工作。有效。是的，如果你知道任何教程在哪裏以及如何建立一個html頁面，並且標籤已正確放置，那麼我會很喜歡。 – MVR

w3schools是最好的開始。 –

jQquery UI需要的jQuery的功能，所以你應該包括第一位。我使用jQuery 1.3.2，因爲這似乎是最適合jQuery UI 1.8的。

這本書可能會有點過時，因爲最新版本是1.12。

我也改變了「點擊」代碼位：

$("button#make_visible").click(function() { 
 
    $("img#dramatic").slideDown(); 
 
});

 img#dramatic { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
 
<body> 
 
<img id="dramatic" src="https://upload.wikimedia.org/wikipedia/commons/4/4c/Wisconsin_State_Fair.jpg" width="400px" height="400px"> 
 
    <br> 
 
    <button id="make_visible">HIDE</button> 
 

 
</body>

來源

2017-10-08 19:39:42

jQuery的幫助無法得到它的工作

回答

相關問題