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.