![](/img/trans.png)
[英]How can I simplify my code for my Javascript “show/hide on DIV” function?
[英]How can i simplify show/hide div when using onchange event?
我目前有一堆div和一个使用onchange事件的下拉菜单,当选择它时会显示div并隐藏它们onchange。 目前,我一次显示一个div,并且一切正常,但是我的代码太多。 无论如何,我可以简化我的代码吗?
Javascript:
<script>
function changeDiv(val)
{
var id = val;
if (id == '1')
{
$('#div_1').css('display','table-row');
$('#div_2').css('display','none');
$('#div_3').css('display','none');
$('#div_4').css('display','none');
}
if (id == '2')
{
$('#div_2').css('display','table-row');
$('#div_1').css('display','none');
$('#div_3').css('display','none');
$('#div_4').css('display','none');
}
if (id == '3')
{
$('#div_3').css('display','table-row');
$('#div_1').css('display','none');
$('#div_2').css('display','none');
$('#div_4').css('display','none');
}
if (id == '4')
{
$('#div_4').css('display','table-row');
$('#div_1').css('display','none');
$('#div_2').css('display','none');
$('#div_3').css('display','none');
}
}
</script>
选择菜单
<select class="seletmenu" onChange="changDiv(this.value)">
<option value="1">Select 1</option>
<option value="2">Select 2</option>
<option value="3">Select 3</option>
<option value="4">Select 4</option>
</select>
股利
<div id="div_1">
<div>Testing select 1</div>
</div>
<div id="div_2">
<div>Testing select 2</div>
</div>
<div id="div_3">
<div>Testing select 3</div>
</div>
<div id="div_4">
<div>Testing select 4</div>
</div>
如果您使用jQuery,则可以将其简化为:
$('.selectmenu').change(function () {
$('.foo').hide();
$('#div_' + this.value).css('display', 'table-row');
})
只需在您的div中添加一个通用类(例如“ foo”)即可。
您可以使用类代替所有Ids。
标记:
<div id="div_1" class="toggleDiv">
<div>Testing select 1</div></div>
<div id="div_2" class="toggleDiv">
<div>Testing select 2</div></div>
<div id="div_3" class="toggleDiv">
<div>Testing select 3</div></div>
<div id="div_4" class="toggleDiv">
<div>Testing select 4</div></div>
然后,您可以隐藏所有div并显示您想要的一个div ...
function changeDiv(val)
{
$('.toggleDiv').css('display','none');
$('#div_'+val).css('display','table-row');
}
Viola,完成了相同的功能,减少了代码。
供参考,您可以按以下方式重构代码:
function changeDiv(val) {
$('#div_1').css('display','none');
$('#div_2').css('display','none');
$('#div_3').css('display','none');
$('#div_4').css('display','none');
$('#div_' + val).css('display','table-row');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.