根据输入值显示一个div并隐藏其他div

Question

如何重构$('#region-2, #region-3').hide();，这样就无需键入多个ID？可能有50多个元素。

$('#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();
  }
});

<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>

Answer 1

要实现此目的，您可以将查找值放在每个子div的data属性中。然后，您可以filter()来查找与#input1和show()的值匹配的值，同时隐藏所有其他值。试试这个：

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

<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>

Answer 2

如果您要使用与id相同的文本，只是使用不同的空格，以便可以使用它。

由于您使用的是引导程序，因此可以使用hide类，而无需使用内联样式。

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

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

<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>

Answer 3

我只是在代码中更新了jQuery的一些更改，希望对您有所帮助。谢谢

  

您必须在输入中输入与您在HTML中编写的ID相同的

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

.hide {
  display: none;
}

<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>