jQuery slideToggle이 숨겨진 요소 또는 보이는 요소를 생성합니까?

여기에 내 면책 조항을 표시하기 위해 버튼을 사용하고 있습니다. 몇 가지 이유로 버튼의 값을 올바르게 변경하는 방법을 알 수 없습니다.jQuery slideToggle이 숨겨진 요소 또는 보이는 요소를 생성합니까?

$(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 코드입니다. 부인이 전환 될 때 때문에이 숨겨진 것처럼 보이지만, 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

자바 스크립트 기능이 행진 대신 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

나는 그것이 전혀 n00b 질문이라고 생각하지 않는다. 그것은 나에게도 의미가 없다. jQuery는 요소의 실제 가시성을 확인하는 데 별 어려움이 없다. '가시성'선택기 페이지의 하단에있는 주석에서이를 언급 한 사람이 있습니다. http://api.jquery.com/visible-selector/ '움직이는'선택기를 확인한 후 그 대상에 신경 쓰지 않았습니까? – attack

안녕하세요. 그 주석을 보았습니다. 그러면 if else 문을 slideToggle의 콜백 함수로 두는 것이 좋습니다. 애니메이션 요소가 애니메이션이 끝날 때까지 보이도록 표시되기 때문입니다. 감사! – Qcom

jQuery slideToggle이 숨겨진 요소 또는 보이는 요소를 생성합니까?

답변

관련 문제