Question

我为my site创建了一个假的控制台导航，人们必须输入特定的值或“命令”。显示它对应的div。我让这个为一个div工作，但我想知道如何让它与多个div一起工作。当我尝试this jquery script时，div会独立显示，但是如果我尝试一个接一个地搜索，＃div2会显示在＃div1的左边并且会产生一些奇怪的闪烁，或者＃div1会拒绝消失。 / p>

＆＃13;

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

＆＃13;

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

＆＃13;

我希望当您退格并输入输入条目字段时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类.hide类，其中display: none;属性为<div>，最初隐藏class(data)。

希望它有所帮助！

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

尝试为所有div添加一个公共类，并使用类

的名称显示/隐藏

搜索所有这个类div并隐藏它们

为exmaple

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")
}

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

3 个答案: