Optimize jQuery Function

Question

It's possible to optimize and minify this sample function? How could I do it?

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

        }

    });

});

stecb · Accepted Answer · 2015-03-26T12:55:19.673

5

$(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();
    });

});

edited Mar 26 '15 at 12:55

answered May 18 '11 at 13:12

stecb

14,478
2
50
68

here compressed (YUI) => `$(function(){$("#options").change(function(){var b=$("#options").val();var a=["image","flash","youtube","google"];$("#display_flash, #display_youtube, #display_google, #display_image").hide();$("#display_"+a[b]).show()})});` – stecb May 18 '11 at 13:20
+1 I like it. I would add in a check whether `message_index` is in the array, you can avoid an unnecessary jQuery call. – kapa May 18 '11 at 13:28
Yes, well.. it's something I left for the OP :D – stecb May 18 '11 at 13:36

score 2 · Answer 2 · answered May 18 '11 at 13:11

Not really much optimisation, but certainly cleaner 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;
        }
    });

});

To minify, use http://jscompress.com/

i would also put your hides together ohh and get rid of the var just put it in the switch — mcgrailm, May 18 '11 at 13:12

score 1 · Answer 3 · answered May 18 '11 at 13:10

1

If you want to minify that code, try putting it into here - http://www.minifyjavascript.com/

answered May 18 '11 at 13:10

Tristar Web Design

765
1
5
11

score 1 · Answer 4 · answered May 18 '11 at 13:21

With your current code, you could do something like this:

$("#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();
    }
});

You haven't provided the markup you're running this on, even further optimizations would be possible based on that. Maybe adding a common class for those showable elements. If the elements are in the right order in the markup (same as the message_index order), you can go even further with optimizations.

For minification, there are several tools to use, the others have provided you some.

I like It. If you'll write a book I'll definitely but it. Thank you — Cheerio, May 18 '11 at 13:30
@MiniNaim If I ever write a book, it won't be about programming :). There are more qualified people for that. — kapa, May 18 '11 at 13:33

score 0 · Answer 5 · edited May 23 '17 at 11:43

0

You can get ideas from:

Minify jQuery based js files

How to minify jquery files?

edited May 23 '17 at 11:43

Community

1
1

answered May 18 '11 at 13:10

bhu1st

1,282
11
23

score 0 · Answer 6 · answered May 18 '11 at 13:12

0

replace your if statement with a switch statement

answered May 18 '11 at 13:12

Mutt

937
6
9

1

This is really a comment, not an answer to the question. Please use "add comment" to leave feedback for the author. – John K Aug 10 '12 at 05:36
Question: How could I do it? Answer: replace your if statement with a switch statement – Mutt Aug 13 '12 at 20:21

Optimize jQuery Function

6 Answers6