[英]how to show/hide multiple divs based on input value?
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. 我为我的网站创建了一个虚假的控制台导航,人们必须在其中输入特定的值或“命令”以显示其对应的div。 i got this to work for one div but i'm wondering how i can get it to work with multiple divs.
我让它在一个div上工作,但是我想知道如何让它在多个div上工作。 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.
当我尝试使用该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(); } });
<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>
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. 我希望当您退格并在输入输入字段中输入时div消失,并且我希望当您输入新命令时当前的div消失。 so what do i need to change?
所以我需要改变什么? do the divs need to go in wrapper?
div是否需要包装?
Try this snippet! 试试这个片段!
// 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();
}
});
You can also have a common CSS
class like .hide
with display: none;
您也可以使用
.hide
这样的普通CSS
类,并使用display: none;
property to initially hide the <div>
. 属性以最初隐藏
<div>
。
Hope it helps! 希望能帮助到你!
Try to add one common Class for all div and show/hide using the name of class 尝试为所有div添加一个通用类,并使用类名称显示/隐藏
search for all this class divs and hide them 搜索所有此类div并将其隐藏
for exmaple 例如
HTML 的HTML
<div id="div1" class="CommonClass">div1 content</div>
<div id="div2" class="CommonClass">div2 content</div>
JS JS
$(".CommonClass").each(function(index,obj)){
$(obj).hide(); // Or $(obj).css("display","none")
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.