Оптимизировать функцию jQuery

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

Не очень много оптимизаций, но, конечно, чище ИМО:

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

С вашим текущим кодом вы могли бы сделать что-то вроде этого:

$("#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 4

Если вы хотите минимизировать этот код, попробуйте ввести его здесь - http://www.minifyjavascript.com/

Answer 5

замените ваш оператор if на оператор switch

Answer 6

Вы можете получить идеи от:

Сокращение js-файлов на основе jQuery

Как минимизировать файлы jquery?