jQuery slideToggle創建隱藏或可見的元素？

我在這裏使用一個按鈕來滑動我的免責聲明的顯示，出於某種原因，我找不到如何正確更改按鈕的值。jQuery slideToggle創建隱藏或可見的元素？

這裏是我的jQuery代碼：

$(document).ready(function() { 

    $('<input type="button" id="toggleButton" value="Hide">') 
    .insertAfter('#disclaimer') 
    .click(function() { 
    $(this).prev().slideToggle('slow'); 

    if($(this).prev().is(':visible')) { 
    $(this).val('Hide'); 
    } else { 
    $(this).val('Show'); 
    } 

    }); 

});

所以，我相信一切都是爲了除

.is(':visible')

部分。現在，我不知道是否因爲當免責聲明切換，雖然看起來隱藏，根據jQuery的，它只是切換不隱藏，所以我需要的

:visible

過濾器更改爲不同的一個。

過濾器或其他任何建議的任何建議？此外，我已經知道我的this和.prev（）引用正常工作，因爲slideToggle發生，但是按鈕的值不會。

謝謝！

UPDATE：

圖我的測試頁面的HTML將是有益的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>StarTrackr!</title> 

    <link rel="stylesheet" href="../../css/base.css" type="text/css" media="screen" charset="utf-8" /> 

    <script src="../../lib/jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript" src="script.js"></script> 
</head> 
<body> 
    <div id="container"> 
    <div id="header"> 
     <h1>StarTrackr!</h1> 
    </div> 
    <div id="content"> 
     <h2> 
     Welcome! 
     </h2> 
     <div id="navigation"> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Buy Now!</a></li> 
      <li><a href="#">About Us</a></li> 
      <li><a href="#">Gift Ideas</a></li> 
     </ul> 
     </div> 
     <p id="intro"> 
     Welcome to <strong>StarTrackr!</strong> the planet's premier celebrity tracking and monitoring service. Need to know where in the world the best bands, musicians or producers are within 2.2 square meters? You've come to the right place. We have a very special special on B-grade celebs this week, so hurry in!  
     </p> 
     <p id="disclaimer"> 
     Disclaimer! This service is not intended for the those with criminal intent. Celebrities are kind of like people so their privacy should be respected. 
     </p> 

     <div id="news"> 
     <h2>Latest News</h2> 
     <p> 
      Which member of the seminal calypso/lectro band <em>C&amp;C Music Sweatshop</em> was spotted last night at <em>Dirt</em>, the trendy New York restaurant that serves only food caught and retrieved by the chef's own hands? 
      <span class="spoiler">Yes! It's the ever-effervescent, <em>Glendatronix</em>!</span> 
     </p> 
     <p>Who lost their recording contract today? <span class="spoiler">The Zaxntines!</span></p> 
     </div> 
     <div id="celebs"> 
     <h2 class="heading">Our Celebrities</h2> 
     <p class="info"> 
      We have an ever changing roster of newly chipped celebrities. But it can take as little as a week for the little critters to realise they've been tagged - so you have to be fast! 
     </p> 
     <table class="data"> 
      <thead> 
      <tr> 
       <th>ID</th> 
       <th>Name</th> 
       <th>Occupation</th> 
       <th>Approx. Location</th> 
       <th>Price</th> 
      </tr> 
      </thead> 
      <tbody> 
      <tr> 
       <td>203A</td> 
       <td>Johny Stardust (<a href="bio.pdf">bio</a>)</td> 
       <td>Front-man</td> 
       <td>Los Angeles</td> 
       <td>$39.95</td> 
      </tr> 
      <tr> 
       <td>141B</td> 
       <td>Beau Dandy (<a href="img.jpg">pic</a>,<a href="bio.pdf">bio</a>)</td> 
       <td>Singer</td> 
       <td>New York</td> 
       <td>$39.95</td> 
      </tr> 
      <tr> 
       <td>2031</td> 
       <td>Mo' Fat (<a href="img.jpg">pic</a>)</td> 
       <td>Producer</td> 
       <td>New York</td> 
       <td>$19.95</td> 
      </tr> 
      <tr> 
       <td>007F</td> 
       <td>Kellie Kelly (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td> 
       <td>Singer</td> 
       <td>Omaha</td> 
       <td>$11.95</td> 
      </tr> 
      <tr> 
       <td>8A05</td> 
       <td>Darth Fader (<a href="img.jpg">pic</a>)</td> 
       <td>DJ</td> 
       <td>London</td> 
       <td>$19.95</td> 
      </tr> 
      <tr> 
       <td>6636</td> 
       <td>Glendatronix (<a href="bio.pdf">bio</a>,<a href="w.doc">press</a>)</td> 
       <td>Keytarist</td> 
       <td>London</td> 
       <td>$39.95</td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 


     <div id="comment"> 
     <h2>Leave a comment</h2> 
     name:<br /> 
     <input type="text" /><br/> 
     comment:<br/> 
     <textarea rows="5" cols="30"></textarea> 
     </div> 

     <h2>Fine Print</h2> 
     <p id="fine_print"> 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
     </p> 

    </div> 

    <div id="footer"> 
     <p> 
     &copy; Copyright 2010 CelebriTracker Productions 
     </p> 
    </div> 
    </div> 
</body> 
</html>

來源

2010-08-15 Qcom

JavaScript函數在前進，而不是等待的slideToggle完成，所以你需要堅持你在動畫回調中的測試：

$('<input type="button" id="toggleButton" value="Hide">') 
    .insertAfter('#disclaimer') 
    .click(function() { 
     $(this).prev().slideToggle('slow', function() { 

      if($('#disclaimer').is(':visible')) { 
       $('#toggleButton').val('Hide'); 
      } else { 
       $('#toggleButton').val('Show'); 
      } 

     }); 

    });

來源

2010-08-15 06:14:23 attack

嘿，謝謝，就這麼做了！此外，只是爲了澄清，因爲我仍然是一個n00b：當你的意思是JS功能繼續前進時，你說如果沒有將它放入動畫的回調中，if else語句就不起作用，爲什麼？即使它正在進行，您是否可以檢查＃免責聲明是否可見？ – Qcom 2010-08-15 07:15:55

我認爲這根本不是一個問題：它對我來說也沒有任何意義。據我所知，jQuery並不打算檢查元素的實際可見性。有人在'可見性'選擇器頁面底部的註釋中提到它：http://api.jquery.com/visible-selector/也許它是檢查'動畫'選擇器，然後不打擾它？ – attack 2010-08-15 20:04:58

嘿，真好！我看到了註釋，並且將if else語句作爲slideToggle的回調函數是有意義的，因爲在動畫完成之前，動畫元素將顯示爲可見。謝謝！ – Qcom 2010-08-15 20:24:40

jQuery slideToggle創建隱藏或可見的元素？

回答

相關問題