Mon problème est que j'essaie de faire du vélo entre les éléments HTML à l'aide de boutons. Je veux montrer un élément lorsque j'appuie sur le bouton associé et cache les autres éléments.
Mon code actuel utilise le spectacle et cacher de JQuery, et je ne sais pas si ce sont les meilleurs pour ce que j'essaie de fais. J'utiliserai finalement environ 14 boutons et 14 différents éléments div. Un tableau peut mieux fonctionner pour ce que j'essaie de faire. P>
Ce code ne montre pas ou ne cache rien sur le bouton Presse. J'aimerais que le code affiche l'élément associé à chaque bouton et masquer tous les autres éléments. P>
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button id="div1Button">Div1</button> <button id="div2Button">Div2</button> <button id="div3Button">Div3</button> <div id="div1"> Hello Im div1 </div> <div id="div2"> Hello Im div2 </div> <div id="div3"> Hello Im div3 </div>
3 Réponses :
Vous avez oublié d'ajouter le p> # code> lorsque vous sélectionnez les boutons.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="div1Button">Div1</button>
<button id="div2Button">Div2</button>
<button id="div3Button">Div3</button>
<div id="div1">
Hello Im div1
</div>
<div id="div2">
Hello Im div2
</div>
<div id="div3">
Hello Im div3
</div>
Vous devriez donner une classe CSS pour votre division indiquée, puis cacher (ou donner une classe "cachée" à) tous les autres div, ce qui n'a pas cette classe.
Il rendra votre code évolutif et moins redondant.
Vous devez utiliser la classe pour votre bouton et votre div au lieu d'ID, puis utilisez l'attribut de données sur la cible que DIV affichera lorsque le bouton cliqué sur le bouton DIV lorsque vous avez cliqué.
Exemple: P>
P>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="toggleButton" data-target="#div1">Div1</button> <button class="toggleButton" data-target="#div2">Div2</button> <button class="toggleButton" data-target="#div3">Div3</button> <div class="toggleDiv" id="div1"> Hello Im div1 </div> <div class="toggleDiv" id="div2"> Hello Im div2 </div> <div class="toggleDiv" id="div3"> Hello Im div3 </div>
Vous manquez le préfixe
# sur les sélecteurs d'identité:$ ('# div1button') . Je vous suggère également que vous utilisez des classes communes au lieu d'identifiants uniques, car il réduira tout votre JS dans un seul gestionnaire d'événements de clic.