Question

可以优化和缩小此样本函数吗？我怎么能这样做？

$(function () {
    $("#options").change(function () {
        var message_index = $("#options").val();
        if (message_index == 0) {

            $("#display_image").show();
            $("#display_flash, #display_youtube, #display_google").hide();

        } else if (message_index == 1) {

            $("#display_flash").show();
            $("#display_image, #display_youtube, #display_google").hide();

        } else if (message_index == 2) {

            $("#display_youtube").show();
            $("#display_image, #display_flash, #display_google").hide();

        } else if (message_index == 3) {

            $("#display_google").show();
            $("#display_image, #display_flash, #display_youtube").hide();

        } else {

            $("#display_image, #display_flash, #display_youtube, #display_google").hide();

        }

    });

});

Answer 1

$(function () {

    var $displays = $("#display_flash, #display_youtube, #display_google, #display_image"),
        toShow = ['image','flash','youtube','google'];
    $("#options").change(function () {
        $displays.hide();
        $("#display_"+toShow[$(this).val()]).show();
    });

});

Answer 2

没有太多的优化，但肯定更清洁的IMO：

$(function () {
    $("#options").change(function () {
        // hide everything
        $("#display_image, #display_flash, #display_youtube, #display_google").hide();

        switch ($("#options").val()) {
            case 0:
                $("#display_image").show();
                break;
            case 1:
                $("#display_flash").show();
                break;
            case 2:
                $("#display_youtube").show();
                break;
            case 3:
                $("#display_google").show();
                break;
        }
    });

});

要缩小，请使用http://jscompress.com/

Answer 3

如果您想缩小代码，请尝试将其放入此处 - http://www.minifyjavascript.com/

Answer 4

使用您当前的代码，您可以执行以下操作：

$("#options").change(function () {
    var message_index = $("#options").val();
    var elemIds=[
        '#display_image', 
        '#display_flash', 
        '#display_youtube', 
        '#display_google'];
    $(elemIds.join(',')).hide();
    if (elemIds[message_index]) {
        $(elemIds[message_index]).show();
    }
});

您尚未提供正在运行此标记的标记，甚至可以基于此进一步优化。也许为那些可显示的元素添加一个公共类。如果元素在标记中的顺序正确（与message_index顺序相同），则可以进一步优化。

对于缩小，有几种工具可供使用，其他工具为您提供了一些工具。

Answer 5

您可以从以下网址获取想法：

Minify jQuery based js files

How to minify jquery files?

Answer 6

用switch语句替换你的if语句

优化jQuery函数

6 个答案: