0
J'utilise un bouton pour glisserToggle l'affichage de mon avertissement ici, et pour une raison quelconque, je ne peux pas savoir comment changer la valeur du bouton correctement.jQuery slideToggle crée des éléments cachés ou visibles?
Voici mon code 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');
}
});
});
Alors, je crois que tout est en ordre, sauf pour la
.is(':visible')
. Maintenant, je me demande si parce que quand l'avertissement est basculée, bien qu'il semble caché, selon jQuery, il est seulement basculée pas caché donc je dois changer le
:visible
filtre à un autre.
Des suggestions pour le filtre ou autre chose? De plus, je sais déjà que ceci et les références .prev() fonctionnent correctement, parce que le slideToggle se produit, mais pas la valeur du bouton.
Merci!
MISE À JOUR:
Figure HTML pour ma page de test serait utile:
<!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&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>
© Copyright 2010 CelebriTracker Productions
</p>
</div>
</div>
</body>
</html>
Salut merci, ça l'a fait! Aussi, juste pour clarifier parce que je suis toujours un n00b: Quand vous voulez dire que la fonction JS marchait sur, vous dites que l'instruction if else ne fonctionnerait pas sans le placer dans le rappel pour l'animation parce que pourquoi? Même si ça marche, ne serais-tu pas capable de vérifier si le #disclaimer est visible ou non? – Qcom
Je ne pense pas que ce soit une question n00b du tout: ça n'a pas vraiment de sens pour moi non plus. Pour autant que je sache, jQuery ne prend pas la peine de vérifier la visibilité réelle de l'élément. Quelqu'un le mentionne dans les commentaires en bas de la page de sélection 'visibility': http://api.jquery.com/visible-selector/ Peut-être que ça vérifie le sélecteur 'animé' et que ça ne dérange pas? – attack
Hey sympa! Je vois le commentaire, et cela a donc du sens de placer l'instruction if else en tant que fonction de rappel du slideToggle, car les éléments animés seront affichés comme visibles jusqu'à la fin de l'animation. Merci! – Qcom