Je suis assez nouveau dans jQuery et j'ai essayé de créer un bouton à bascule afficher / masquer sans utiliser la fonction de bascule de jQuery et je ne peux pas comprendre ce qui ne va pas avec le code suivant.
Le bouton Masquer masque le paragraphe avec succès. La partie cachée fonctionne. Il ajoute une classe "show" et supprime la classe "hide" et modifie le texte du bouton. J'ai utilisé les outils de développement pour voir cela et cette partie fonctionne mais cliquer à nouveau sur le bouton ne fonctionne pas, c'est-à-dire la partie show.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <p class="content">If you click on the "Hide" button, I will disappear.</p> <button class="hide">Hide</button>
$(document).ready(function() {
$(".hide").click(function() {
$(".content").hide();
$(this).addClass("show");
$(this).removeClass("hide");
$(this).text("Show");
});
$(".show").click(function() {
$(".content").show();
});
});
4 Réponses :
Vous ne voulez pas changer la classe - si vous devez déléguer pour que l'événement soit enregistré dans un conteneur statique comme le document
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <p class="content">If you click on the "Hide" button, I will disappear.</p> <button class="hide">Hide</button>
Je suggère de basculer à la place: p >
$(document).ready(function() {
$(document).on("click",".hide",function() {
$(".content").hide();
$(this).text("Show")
.removeClass("hide")
.addClass("show");
});
$(document).on("click",".show",function() {
$(".content").show();
$(this).text("Hide")
.removeClass("show")
.addClass("hide");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <p class="content">If you click on the "Hide" button, I will disappear.</p> <button class="but">Hide</button>
Sans bascule
$(document).ready(function() {
$(".but").on("click",function() {
$(".content").toggle();
$(this).text($(this).text()=="Show"?"Hide":"Show");
});
});
$(document).on("click",".hide",function() {
Cela fonctionne, mais comment? Quelle est la différence en plus du fait que vous avez associé l'événement de clic en utilisant "on"?
J'ai attaché l'événement click au DOCUMENT et non au bouton qui a disparu du jQuery lorsque vous avez changé de classe
Vous pouvez utiliser toggle () pour changer facilement l'état visible d'un élément à l'aide d'un seul bouton. Ensuite, vous pouvez fournir une fonction à text () pour définir le texte sur le bouton en fonction de sa valeur actuelle. Essayez ceci:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <p class="content">If you click on the "Hide" button, I will disappear.</p> <button class="toggle">Hide</button>
.hide {
display: none;
}
Si vous vouliez faire cela sans toggle () , vous pouvez utiliser toggleClass () pour changer l'état du hide classe, comme ceci:
$(document).ready(function() {
$(".toggle").click(function() {
$(".content").toggleClass('hide');
$(this).text(function(i, t) {
return t == 'Show' ? 'Hide' : 'Show';
})
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <p class="content">If you click on the "Hide" button, I will disappear.</p> <button class="toggle">Hide</button>
$(document).ready(function() {
$(".toggle").click(function() {
$(".content").toggle();
$(this).text(function(i, t) {
return t == 'Show' ? 'Hide' : 'Show';
})
});
});
Je connaissais la fonction bascule. Je voulais faire ça sans ça.
Pour quelle raison? C'est la chose la plus appropriée que vous devez utiliser ici. Tout le reste est redondant.
Je suis un débutant en JavaScript, je voulais juste l'essayer. C'est comme ça que tu apprends, n'est-ce pas?
Très bon point. J'ai mis à jour la réponse pour vous montrer une alternative à toggle () , bien que la première soit la meilleure approche.
Comme d'autres réponses l'ont souligné, je peux aussi attacher des événements en utilisant "on ()" pour résoudre cela mais j'aime aussi cette solution CSS. Merci Monsieur.
Pas de problème, heureux de vous aider.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <p class="content">If you click on the "Hide" button, I will disappear.</p> <button id="show-hide">Hide</button>
$("#show-hide").toggle(function() {
$(".content").hide();
$(this).text("Show");
}, function() {
$(".content").show();
$(this).text("Hide");
});
Créez un extrait et testez-le. Votre bascule n'est pas ce que vous pensez que c'est
désolé, toggle est une animation maintenant dans jQuery. Je suppose que la prochaine meilleure chose de mon point de vue est toggleClass.
A été pendant des années
L'événement click ne fonctionne que lorsque l'élément auquel vous l'ajoutez est construit lors de la création initiale du DOM. Dès que vous changez le nom de classe du bouton de 'show' à 'hide', ceci "le supprime du DOM" dans un sens basé sur les événements.
Pour obtenir le bouton cliquez sur l'événement à déclencher après avoir changé le nom de la classe sur le bouton, vous devez attribuer l'événement de clic à l'aide de la fonction on () et la fonction doit être placée sur le conteneur parent de l'élément qui déclenchera l'événement. Dans l'exemple ci-dessous, j'ai ajouté la méthode on () à l'objet document, de sorte que tous les éléments du document qui ont une classe de .hide ou .show hériteront de ces événements de clic. Cela s'appliquera également à tous les nouveaux éléments que vous créez à la volée.
<p class="content">If you click on the "Hide" button, I will disappear.</p>
<button class="hide">Hide</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).on('click', ".show", function(){
$(".content").show();
$(this).addClass("hide");
$(this).removeClass("show");
$(this).text("Hide");
});
$(document).on('click', ".hide", function(){
$(".content").hide();
$(this).addClass("show");
$(this).removeClass("hide");
$(this).text("Show");
});
</script>
Vous devriez également utiliser la méthode toggleClass () suggérée par @mplungjan.
Voici la documentation jQuery pour la fonction on () https://api.jquery.com/on/
N'est-ce pas la même chose que ma deuxième solution?
Merci pour l'explication. Maintenant, je sais pourquoi mon code ne fonctionnait pas.
Vous avez tout à fait raison @mplungjan, j'aurais dû lire votre réponse plus en détail avant de publier la mienne.