javascript - 根据输入值显示一个 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>