Javascript-隱藏和調用特定“ Div”時出錯（調用特定div-onchange）
[英]Javascript - Error in hiding and calling specific “Div” (Calling specific div - onchange)
問題描述
我有一個下拉框列出2015/2016年。 每個都以div的形式提供，在其下具有（每月和每周）單選按鈕。
如果我在下拉列表中選擇2015，則應查看2015每月和每周。 2016年也一樣。
我的問題是，當年的div在同一個頁面中一起查看。 有人可以給個建議嗎。 感謝您的時間和幫助。
我的JS代碼：
<!DOCTYPE html> <html> <body> <select class="dropdown" id="year" name="year" size="1" onchange="changeDiv('year');"> <option value="2015" selected="selected">2015</option> <option value="2016">2016</option> </select> <div id="2015"> <B>AAAAAAA</B> <input type="radio" checked="checked" onclick="javascript:changeDiv('2015Monthly');" />Monthly <input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" />Weekly <div id="2015Monthly" ><B>2015 - Monthly</B></div> <div id="2015Weekly" ><B>2015 - Weekly</B></div> <div id="2016"> <B>HHHHHHH</B> <input type="radio" checked="checked" onclick="javascript:changeDiv('2016Monthly');" />Monthly <input type="radio" onclick="javascript:changeDiv('2016Weekly');" />Weekly <div id="2016Monthly" ><B>2016 - Monthly</B></div> <div id="2016Weekly" ><B>2016 - Weekly</B></div> <script> function changeDiv(divId) { if(divId=='2015Monthly') { document.getElementById(divId).style.display="block"; document.getElementById('2015Weekly').style.display="none"; }else if(divId=='2015Weekly') { document.getElementById(divId).style.display="block"; document.getElementById('2015Monthly').style.display="none"; }else if(divId=='2016Monthly') { document.getElementById(divId).style.display="block"; document.getElementById('2016Weekly').style.display="none"; }else if(divId=='2016Weekly') { document.getElementById(divId).style.display="block"; document.getElementById('2016Monthly').style.display="none"; }else if(divId=='2016') { document.getElementById(divId).style.visibility="visible"; document.getElementById('2015').style.visibility="hidden"; }else if(divId=='2015') { document.getElementById(divId).style.visibility="visible"; document.getElementById('2016').style.visibility="hidden"; } } </script> </body> </html>
輸出：
2 個解決方案
解決方案1
2 已采納 2016-02-03 11:24:29
（主要）問題是，您沒有傳遞id而是傳遞字符串year 。
因此，您需要將onchange值更改為this.value以便采用所選內容的值 （2015/2015）。
<!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <select class="dropdown" id="year" name="year" size="1" onchange="changeDiv(this.value);"> <option value="2015" selected="selected">2015</option> <option value="2016">2016</option> </select> <div id="2015"> <B>AAAAAAA</B> <input type="radio" checked="checked" onclick="javascript:changeDiv('2015Monthly');" name="2015_type" />Monthly <input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" name="2015_type" />Weekly <div id="2015Monthly" ><B>2015 - Monthly</B></div> <div id="2015Weekly" ><B>2015 - Weekly</B></div> </div> <div id="2016"> <B>HHHHHHH</B> <input type="radio" checked="checked" onclick="javascript:changeDiv('2016Monthly');" name="2016_type" />Monthly <input type="radio" onclick="javascript:changeDiv('2016Weekly');" name="2016_type" />Weekly <div id="2016Monthly" ><B>2016 - Monthly</B></div> <div id="2016Weekly" ><B>2016 - Weekly</B></div> </div> <script> function changeDiv(divId) { if(divId=='2015Monthly') { document.getElementById(divId).style.display="block"; document.getElementById('2015Weekly').style.display="none"; }else if(divId=='2015Weekly') { document.getElementById(divId).style.display="block"; document.getElementById('2015Monthly').style.display="none"; }else if(divId=='2016Monthly') { document.getElementById(divId).style.display="block"; document.getElementById('2016Weekly').style.display="none"; }else if(divId=='2016Weekly') { document.getElementById(divId).style.display="block"; document.getElementById('2016Monthly').style.display="none"; }else if(divId=='2016') { document.getElementById(divId).style.display="block"; document.getElementById('2015').style.display="none"; }else if(divId=='2015') { document.getElementById(divId).style.display="block"; document.getElementById('2016').style.display="none"; } } $('#year').change(); $(':checked').trigger('click'); </script> </body> </html>
解決方案2
0 2016-02-03 11:43:16
有一些你想念的東西。 例如，如何在更改時調用函數。 函數的參數不正確。 該解決方案應該起作用：
<!DOCTYPE html>
<html>
<body>
<select id="mySelect" name="year" size="1" onchange="myFunction()">
<option value="2015" selected="selected">2015</option>
<option value="2016">2016</option>
</select>
<div id="2015" style="display:block">
<B>AAAAAAA</B>
<input type="radio" checked="checked" onclick="javascript:changeDiv('2015Monthly');" />Monthly
<input type="radio" onclick="javascript:changeDiv('2015Weekly');" align="left" />Weekly
<div id="2015Monthly" ><B>2015 - Monthly</B></div>
<div id="2015Weekly" ><B>2015 - Weekly</B></div>
</div>
<div id="2016" style="display:none">
<B>HHHHHHH</B>
<input type="radio" checked="checked" onclick="javascript:changeDiv('2016Monthly');" />Monthly
<input type="radio" onclick="javascript:changeDiv('2016Weekly');" />Weekly
<div id="2016Monthly" ><B>2016 - Monthly</B></div>
<div id="2016Weekly" ><B>2016 - Weekly</B></div>
</div>
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x;
if(x=='2016')
{
document.getElementById(x).style.display="block";
document.getElementById('2015').style.display="none";
}else if(x=='2015')
{
document.getElementById(x).style.display="block";
document.getElementById('2016').style.display="none";
}
}
</script>
</body>
</html>
通過特定 div 的元素調用函數在 jQuery 中不起作用
[英]Calling a function by a specific div's elements is not working in jQuery
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.