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

我为我的网站创建了一个假的控制台导航，人们必须输入一个特定的值或“命令”来显示它对应的div。 我得到这个为一个div工作，但我想知道如何让它与多个div一起工作。 当我尝试这个jquery脚本时 ，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(); } }); 

   
div1 content
 
div2 content 

当你退格并输入输入条目字段时，我希望div消失，并且我希望当你输入新命令时当前div消失。 那么我需要改变什么呢？ div需要包装吗？

Answer 1

试试这个片段吧！

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

你也可以有一个像.hide这样的常见CSS类， display: none; 属性最初隐藏

。

希望能帮助到你！

Answer 2

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

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

例如

HTML

 
div1 content
 
div2 content 

JS

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

Answer 3

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

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

DEMO