jQuery Girl
  1. jQuery Girl
  3. Comment afficher / masquer plusieurs div en fonction de la valeur d’entrée?
Intereting Posts
Modifier la hauteur de l’iframe en fonction du contenu dynamic à l’intérieur de Comment mettre à jour des données sur le terrain sur un site Web à partir d’une firebase database SQL avec AJAX et Django JQuery .slideDown () glisse vers le haut Pas de travail déplaçable / largable avec append jQuery AJAX et VBscript – Impossible d’obtenir des valeurs dans les variables VBscript lors de l’utilisation de POST dans jQuery AJAX jQuery: Pourquoi append un $ à un nom de variable? Bootstrap 4 barre de navigation avec deux rangées, rangée inférieure repliable Comment changer le CSS après le chargement paresseux d’image (jQuery)? Redirection après le post Ajax Plusieurs polylignes superposées sur Google Maps AmCharts – Conteneur graphique de débordement de graphique en courbes définir un cookie dans jquery pour show / hide div Erreur de placement, Select2 Comment lier des événements sur des icons de police géniales? Obtenir le nombre d’utilisateurs à partir de l’iPhone à l’aide de HTML5 / jQuery

Comment afficher / masquer plusieurs div en fonction de la valeur d’entrée?

J’ai créé une fausse navigation sur la console pour mon site où les gens devraient entrer une valeur spécifique ou une “commande” pour afficher le div auquel il correspond. Cela a fonctionné pour un div, mais je me demande comment je peux le faire fonctionner avec plusieurs divs. Lorsque j’ai essayé ce script jQuery, les divs se présentent bien indépendamment, mais si j’essaie de chercher l’un après l’autre, # div2 apparaît à gauche de # div1 et fait des scintillements étranges, ou # div1 refuse de disparaître. 

var div = $('#div1').hide(); $('input').keydown(function() { var value = this.value; if ($('input').val() == 'div1') { $('#div1').slideDown(); } else { div.hide(); } }); var div = $('#div2').hide(); $('input').keydown(function() { var value = this.value; if ($('input').val() == 'div2') { $('#div2').slideDown(); } else { div.hide(); } }); 
   
div1 content
 
div2 content

Je veux que les div disparaissent lorsque vous revenez en arrière et que vous entrez dans le champ de saisie. Je veux que le div actuel disparaisse lorsque vous entrez une nouvelle commande. alors qu’est-ce que je dois changer? les divs doivent-ils aller en wrapper?

Essayez cet extrait! 

 // Hide both 
 by default $('#div1').hide(); $('#div2').hide(); // Check on keydown $('input').keydown(function() { if ($('input').val() == 'div1') { // If input value is div1 $('#div2').hide(); $('#div1').slideDown(); } else if ($('input').val() == 'div2') { // If input value is div2 $('#div1').hide(); $('#div2').slideDown(); } else { // If input value is not equal to div1 or div2, hide both $('#div1').hide(); $('#div2').hide(); } });

Vous pouvez également avoir une classe CSS commune telle que .hide avec display: none; propriété pour masquer initialement le

.

J’espère que ça aide!

Essayez d’append une classe commune à toutes les divs et d’afficher / masquer le nom de la classe.

rechercher tous ces divs de classe et les cacher

par exemple

HTML 

 
div1 content
 
div2 content

JS 

 $(".CommonClass").each(function(index,obj)){ $(obj).hide(); // Or $(obj).css("display","none") }

Ok, vous pouvez le simplifier en utilisant .keyup() au lieu de .keydown() 

 $('div[id^=div]').hide(); $('input').keyup(function() { var id = $.sortingm($(this).val().toLowerCase()); $('div[id^=div]').hide(); $('#'+id).slideDown(); });

DEMO