JavaScript自动隐藏/显示div不起作用
[英]Javascript automatic hide/show div not working
问题描述
我正在尝试使用以下代码在JavaScript中自动隐藏div，以便只能在单击选择选项时显示/隐藏它们：
//hiding the divs
$(document).ready(function(){
function hide(){
$(".atm").hide();
$(".bank").hide();
}
hide();
});
由于我不知道的原因，代码无法正常工作（div仍未隐藏）。 以下是其余代码（正常工作，只有上面的代码没有隐藏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);
}
};
我要去哪里/做错了什么？
4 个解决方案
解决方案1
0 2017-02-10 05:46:06
在这里检查这个答案
$(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
将更改事件绑定到您选择的事件
$(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
更新为未解决的问题-
将以下代码复制到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>
请根据问题的更新最后查看更新：
js对我来说很好，可以在以下示例中使用-可能是您的html：
（您的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>
使用选择：
$(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>
在对问题的更新中，您省略了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();
}).
});
尝试这个。 这将在页面加载时隐藏类，然后在更改选择框后将显示它。 toggle（）函数用于隐藏和显示元素。
Javascript隐藏/显示div不起作用
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.