如何根据输入值显示/隐藏多个 div？答案

【问题标题】：how to show/hide multiple divs based on input value?如何根据输入值显示/隐藏多个 div？
【发布时间】：2016-03-10 17:01:54
【问题描述】：

我为my site 创建了一个虚假的控制台导航，人们必须输入一个特定的值或“命令”来显示它对应的 div。我让它适用于一个 div，但我想知道如何让它适用于多个 div。当我尝试this jquery script 时，div 独立显示很好，但如果我尝试一个接一个地搜索，#div2 会出现在#div1 的左侧并出现一些奇怪的闪烁，或者#div1 拒绝消失。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>


<input type="text" placeholder="ENTER 'div1' or 'div2' COMMAND" />

<div id="div1">div1 content</div>
<div id="div2">div2 content</div>

我希望当您退格并在输入输入字段中输入时 div 消失，并且我希望当您输入新命令时当前 div 消失。那么我需要改变什么？ div 需要放在包装器中吗？

【问题讨论】：

标签： javascript jquery input hide show

【解决方案1】：

试试这个 sn-p！

// Hide both <div> 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();
  }
});

您还可以使用带有 display: none; 属性的通用 CSS 类（例如 .hide）来最初隐藏 <div>。

希望对你有帮助！

【讨论】：

【解决方案2】：

尝试为所有 div 添加一个公共类，并使用类的名称显示/隐藏

搜索所有此类 div 并隐藏它们

例如

HTML

<div id="div1" class="CommonClass">div1 content</div>
<div id="div2" class="CommonClass">div2 content</div>

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

【讨论】：

【解决方案3】：

好的，您可以简化它并使用.keyup() 而不是.keydown()

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

DEMO

【讨论】：