如何根據輸入值顯示/隱藏多個div？

Question

我爲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，當你的退格和輸入輸入字段中輸入消失，我想目前的股利，當你進入一個新的命令消失。所以我需要改變什麼？ divs需要包裝嗎？

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

希望它有幫助！

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並隱藏它們

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