gpt4 book ai didi

javascript - 使用 onchange 事件时如何简化显示/隐藏 div?

转载 作者:行者123 更新时间:2023-11-30 08:42:15 24 4
gpt4 key购买 nike

我目前有一堆 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”)即可。

jsFiddle example

关于javascript - 使用 onchange 事件时如何简化显示/隐藏 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25276889/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com