JavaScript自动隐藏/显示div不起作用
[英]Javascript automatic hide/show div not working
问题描述
I'm trying to automatically hide divs in JavaScript using the below code, such that they can only be displayed/hidden upon clicking a select option: 
我正在尝试使用以下代码在JavaScript中自动隐藏div，以便只能在单击选择选项时显示/隐藏它们：
//hiding the divs
$(document).ready(function(){
function hide(){
$(".atm").hide();
$(".bank").hide();
}
hide();
});
For reasons unknown to me, the code does not work(the divs are still not hidden). 由于我不知道的原因，代码无法正常工作（div仍未隐藏）。 Below is the rest of the code (it works properly, only the code above isn't hidding divs) 以下是其余代码（正常工作，只有上面的代码没有隐藏div）
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
Anywhere I'm going/doing wrong? 我要去哪里/做错了什么？
4 个解决方案
解决方案1
0 2017-02-10 05:46:06
Check this answer here 在这里检查这个答案
$(document).ready(function(){ $(".atm").hide(); $(".bank").hide(); $('select').on('change',function(){ if($('select').val()=='atm'){ $('.atm').show(); $('.bank').hide(); } else if($('select').val()=='bank'){ $('.bank').show(); $('.atm').hide(); } }); });
<html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script></head> <body> <select><option value="atm">ATM</option><option value="bank">Bank</option></select> <div class="atm">ATM</div> <div class="bank">BANK</div>
解决方案2
0 2017-02-10 05:47:09
Bind a change event to your select 将更改事件绑定到您选择的事件
$(document).ready(function(){ function hide(){ $(".atm").toggle(); $(".bank").toggle(); } $('select').on('change',hide).trigger('change'); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="atm">atm</div> <div class="bank">bank</div> <select> <option>select</option> <option>select</option> </select>
解决方案3
0 2017-02-10 05:57:36
Update to unresolved question - 更新为未解决的问题-
Copy the following code into a text.html file and run it a browser and let us know the result: 将以下代码复制到text.html文件中，然后在浏览器中运行它，然后让我们知道结果：
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function hide()
{
$('.atm').hide();
$('.bank').hide();
}
//and here's my javascript code for displaying the hidden divs
function showOptions(s) {
var val = s.options[s.selectedIndex].value;
if(val === "ATM"){
hide();
$(".atm").slideDown(400);
}else
if(val === "Bank"){
hide();
$(".bank").slideDown(400);
}
};
</script>
</head>
<body>
//here's my html code for div
<div class="atm">ATM</div>
<div class="bank">Bank</div>
//here's my select code
<select name="type" id="document-type" onchange="showOptions(this)">
<option value="ATM">ATM</option>
<option value="Bank">Bank</option>
</select>
</body>
</html>
Please see update at end according to question's update: 请根据问题的更新最后查看更新：
The js looks fine to me it works in example below - may be your html: js对我来说很好，可以在以下示例中使用-可能是您的html：
(Do your div's in html have class='atm' & class='bank' ?) （您的div在html中是否具有class ='atm'和class ='bank'吗？）
$(document).ready(function () { function hide () { $(".atm") .hide(); $(".bank").hide(); $('.btnHideShow').text('Show'); } function show () { $(".atm") .show(); $(".bank").show(); $('.btnHideShow').text('Hide'); } $('.btnHideShow').click(function () { if($('.atm').is(':hidden')) { show(); } else { hide(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='atm'>Div ATM</div> <div class='bank'>Div Bank</div> <button class="btnHideShow">Hide</button>
Using select: 使用选择：
$(document).ready(function () { function hide () { $(".atm") .hide(); $(".bank").hide(); $('.btnHideShow').text('Show'); } function show () { $(".atm") .show(); $(".bank").show(); $('.btnHideShow').text('Hide'); } $('.sel').change(function () { //console.log($(this).val()); var val = $(this).val(); if(val === 'None') { hide(); } else if(val === 'Bank-ATM') { show(); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='atm'>Div ATM</div> <div class='bank'>Div Bank</div> <select class="sel"> <option>Bank-ATM</option> <option>None</option> </select>
In your update to the question you left out your hide function: (are you including jquery lib?) 在对问题的更新中，您省略了hide函数：（您是否包括jquery lib？）
function hide() { $('.atm').hide(); $('.bank').hide(); } //and here's my javascript code for displaying the hidden divs function showOptions(s) { var val = s.options[s.selectedIndex].value; if(val === "ATM"){ hide(); $(".atm").slideDown(400); }else if(val === "Bank"){ hide(); $(".bank").slideDown(400); } };
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> //here's my html code for div <div class="atm">ATM</div> <div class="bank">Bank</div> //here's my select code <select name="type" id="document-type" onchange="showOptions(this)"> <option value="ATM">ATM</option> <option value="Bank">Bank</option> </select>
解决方案4
0 2017-02-10 06:02:43
$(document).ready(function(){
$(".atm").hide();
$(".bank").hide();
$('select').change(function(){
$(".atm").toggle();
$(".bank").toggle();
}).
});
Try this. 尝试这个。 This will hide the classess on page load and then after changing the select box it will show. 这将在页面加载时隐藏类，然后在更改选择框后将显示它。 toggle() function is used to hide and show the elements. toggle（）函数用于隐藏和显示元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.