如何根据输入值 show/hide 多个 div？

Question

我为 my site where people would have to enter a specific value or 'command' to show the div that it corresponds to. i got this to work for one div but i'm wondering how i can get it to work with multiple divs. when i tried 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 需要包装吗？

Answer 1

试试这个片段！

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

您也可以使用 CSS class 和 display: none; 属性这样的通用 CSS class 来初始隐藏 <div>。

希望对您有所帮助！

Answer 2

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

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

DEMO

Answer 3

尝试使用 class

的名称为所有 div 和 show/hide 添加一个公共 Class

搜索所有这些 class div 并隐藏它们

例如

HTML

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

JS

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

如何根据输入值 show/hide 多个 div？

how to show/hide multiple divs based on input value?

javascript

jquery

input

show

hide