根据输入值显示一个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，并且只是使用不同的空格，那么您可以使用它。

因为您使用的是bootstrap，所以可以使用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您必须在输入中键入与在

中写入的ids相同的ids

​

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

​