1
votes

Afficher un div et masquer les autres en fonction de la valeur d'entrée

Comment puis-je refactoriser $ ('# region-2, # region-3'). hide (); pour ne pas avoir à saisir plusieurs identifiants? Il peut y avoir plus de 50 éléments.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control marg-bot-20" id="input1" placeholder="">
<input class="btn btn-primary" id="submit1" type="submit" value="">
<div class="region-container">
  <div id="region-1" class="hide">
    region 1
  </div>
  <div id="region-2" class="hide">
    region 2
  </div>
  <div id="region-3" class="hide">
    region 3
  </div>
</div>

$('#submit1').on("click", function() {
  var input_val = $('#input1').val();
  if (input_val == 'region1') {
    $('#region-1').show().attr("style", "display: block!important");
    $('#region-2, #region-3').hide();
  } else if (input_val == 'region2') {
    $('#region-2').show().attr("style", "display: block!important");
    $('#region-1, #region-3').hide();
  }
});

javascript jquery html css

0 commentaires

3 Réponses :

0
votes

Pour ce faire, vous pouvez mettre la valeur de recherche dans un attribut data sur chaque div enfant. Ensuite, vous pouvez les filtrer () pour trouver celui qui correspond à la valeur de # input1 et show () tout en masquant tous les autres. Essayez ceci:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control marg-bot-20" id="input1" placeholder="">
<input class="btn btn-primary" id="submit1" type="submit" value="">
<div class="region-container">
  <div id="region-1" class="hide" data-lookup="region1">
    region 1
  </div>
  <div id="region-2" class="hide" data-lookup="region2">
    region 2
  </div>
  <div id="region-3" class="hide" data-lookup="region3">
    region 3
  </div>
</div>

$('#submit1').on("click", function() {
  var input_val = $('#input1').val();
  $('.region-container > div').hide().filter(function() {
    return $(this).data('lookup') === input_val;
  }).show();
});

0 commentaires

0
votes

Si vous comptez utiliser le même texte que l'identifiant et juste l'espace qui diffère pour que vous puissiez l'utiliser.

Puisque vous utilisez bootstrap, vous pouvez jouer avec la classe hide et pas besoin du style en ligne.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />

<input type="text" class="form-control marg-bot-20" id="input1" placeholder="">
<input class="btn btn-primary" id="submit1" type="submit" value="Search">
<br>
<div class="region-container">
  <div id="region-1" class="hide">
    region 1
  </div>
  <div id="region-2" class="hide">
    region 2
  </div>
  <div id="region-3" class="hide">
    region 3
  </div>
</div>

$('#submit1').on("click", function() {
  if( $('#input1').val() ){
    var input_val = $('#input1').val().replace(' ', '-');

    $('div[id^="region-"]').addClass('hide');
    $('#' + input_val).removeClass('hide');
  }
});

0 commentaires

0
votes

Je viens de mettre à jour quelques changements jQuery dans votre code, j'espère que cela vous aidera. Merci

Vous devez saisir les mêmes identifiants que ceux que vous avez écrits dans votre code HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control marg-bot-20" id="input1" placeholder="">
<input class="btn btn-primary" id="submit1" type="submit" value="Button">
<div class="region-container">
  <div id="region-1" class="hide">
    region 1
  </div>
  <div id="region-2" class="hide">
    region 2
  </div>
  <div id="region-3" class="hide">
    region 3
  </div>
</div>

.hide {
  display: none;
}

$('#submit1').on("click", function() {
  var input_val = $('#input1').val();
  $('.hide').hide();
  $('#' + input_val).show();
});

0 commentaires