Question

脚本：

$(document).ready(function () {
    $("#finance").hide();
    $("#HR").hide();

    var slz = jQuery('#specialization');
    var select = this.value;
    slz.change(function () {
        if ($(this).val() == '2') {
            $('#finance').show();
            $('#HR').hide();
        }
        if ($(this).val() == '3') {
            $('#HR').show();
            $('#finance').hide();
        }
        if ($(this).val() == '1') {
            $('#finance').hide();
            $('#HR').hide();
        }
    });
});

HTML：

<select name="specialization" id="specialization">
 <option value="1" id="1">select specialization</option>
 <option value="2" id="2">Finance</option>
 <option value="3" id="3">Human Resource</option>
 <option value="4" id="4">Information Technology</option>
 <option value="5" id="5">Marketing</option>
 <option value="6" id="6">Material Management</option>
 <option value="7" id="7">Operations</option>
 <option value="8" id="8">Supply Chain Management</option>
</select>
<div id="specialization_subjects">
    Specialization Subjects
</div>
<ul id="finance">
 <li>Financial Institution & Services</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>
<ul id="HR">
 <li>Financial Institution & Services HR</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>

大家好我给了我的javascript和html代码，根据所选的下拉值显示和隐藏ul ..这段代码对我来说很好..但我想缩小javascript文件..因为我有很多ul和很多下拉..

我想删除if else条件，并希望通过在数组等中存储值来使用for循环。

提前致谢请帮助

Answer 1

您可以使用switch case代替if else

Answer 2

我将假设您不是要求缩小，而是最小化您的代码并使其更有效率。既然你说你有很多数据，并且你的选项显示了8个选项，而你的代码只处理了2个，我会告诉你一种方法来轻松处理你的选项。

（这假设您可以更改HTML。如果您不能，请明确说明。）

首先，为要处理的所有uls添加一个公共类，并添加一个与选项值匹配的数据属性

<ul id="finance" class="dropDownOption" data-optionValue="2">
 <li>Financial Institution & Services</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>
<ul id="HR" class="dropDownOption" data-optionValue="3">
 <li>Financial Institution & Services HR</li>
 <li>International Financial Management</li>
 <li>Working Capital Management</li>
 <li>Project Work</li>
</ul>

然后，您的slz.change功能变得更多更容易，更强大：

slz.change(function () 
{
    $(".dropDownOption").hide();
    $("ul[data-optionValue='" + this.value + "']").show();
}

如果不修改您的标记，您可以做一些事情，但他们风险更高。 使用您已经显示的标记，只使用$("ul").hide()是安全的，但如果您还没有向我们展示所有内容，那可能会很危险。要处理id的值，您需要转换函数：

function convertValueToId(value) {
    switch (value) {
        case 1: return; // empty return, since this one is the "unselected" case
        case 2: return "finance";
        case 3: return "HR";
        // etc
    }
}
slz.change(function() {
    $("ul").hide();
    var id = convertValueToId(this.value);
    if (id) {
        $("#" + id).show();
    }
}

缩小Javascript代码以显示和隐藏大量数据

2 个答案: