Question

我目前有一堆div和使用onchange事件的下拉列表，当选择它时显示div并将它们隐藏在更改中。目前我一次显示一个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

<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>

Answer 1

如果您使用jQuery，可以将其减少到：

$('.selectmenu').change(function () {
    $('.foo').hide();
    $('#div_' + this.value).css('display', 'table-row');
})

只需在你的div中添加一个公共类（例如＆＃34; foo＆＃34;）。

<强> jsFiddle example

Answer 2

您可以使用类而不是所有ID。

标记：

<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并显示你想要的那个......

function changeDiv(val)
{
    $('.toggleDiv').css('display','none');
    $('#div_'+val).css('display','table-row');
}

Viola，完成了相同的功能，更少的代码。

Answer 3

供您参考，您可以按以下方式重构代码：

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');
}

如何在使用onchange事件时简化显示/隐藏div？

3 个答案: