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.