Question

我正在使用一个按钮来滑动我的免责声明显示，出于某种原因，我无法找到如何正确更改按钮的值。

这是我的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

过滤到另一个。

有关过滤器或其他任何建议吗？此外，我已经知道我的这个和.prev（）引用正常运行，因为发生了slideToggle，但是按钮的值却没有。

谢谢！

更新

图我的测试页面的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>

Answer 1

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');
            }

        });

    });

jQuery slideToggle创建隐藏或可见元素？

1 个答案: