如何根据输入值显示/隐藏多个div? [英] how to show/hide multiple divs based on input value?

问题描述

我为我的站点创建了一个虚假的控制台导航，在该导航中，人们将不得不输入特定的值或命令"显示它对应的div.我让它在一个div上工作，但是我想知道如何让它在多个div上工作.当我尝试此jquery脚本时，div可以独立显示，但是如果我尝试在一个接一个的搜索中，#div2出现在#div1的左侧，并且出现了一些怪异的闪烁，或者#div1拒绝消失.

i created a fake console navigation for 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 the divs show up fine independently, but if i try searching for one after the other, #div2 shows up on the left of #div1 and does some weird flickering, or #div1 refuses to disappear.

  
  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是否需要包装?

i want the divs to disappear when you backspace and enter in the input entry field, and i want the current div to disappear when you enter a new command. so what do i need to change? do the divs need to go in wrapper?

推荐答案

尝试此代码段！

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

You can also have a common CSS class like .hide with display: none; property to initially hide the <div>.

希望有帮助！

这篇关于如何根据输入值显示/隐藏多个div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！