如何根据输入值 show/hide 多个 div?
how to show/hide multiple divs based on input value?
我为 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 需要包装吗?
试试这个片段!
// 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>
。
希望对您有所帮助!
好的,您可以简化它并使用 .keyup()
而不是 .keydown()
$('div[id^=div]').hide();
$('input').keyup(function() {
var id = $.trim($(this).val().toLowerCase());
$('div[id^=div]').hide();
$('#'+id).slideDown();
});
尝试使用 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")
}
我为 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 需要包装吗?
试试这个片段!
// 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>
。
希望对您有所帮助!
好的,您可以简化它并使用 .keyup()
而不是 .keydown()
$('div[id^=div]').hide();
$('input').keyup(function() {
var id = $.trim($(this).val().toLowerCase());
$('div[id^=div]').hide();
$('#'+id).slideDown();
});
尝试使用 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")
}