CODEWITHSUNDEEP
javascriptjqueryif-statement
SoundFx 2014
SoundFx 2014

Reputation: 13

If / Else if statement reduction

From my server, I get a XML list with "Timelines" that are running. When a Timeline is in a "Running"or "Held at end" state a button will be in an active state.

I have done it this way and it works. But I would like to turn down the "Else" statements in my code. Any ideas?

 function statusCheck()
{
    $.ajax({
        type: "GET",
        url: "/query/timelineStatus?id=1-30",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("timelineStatus").each(function(){
                var timelineId = parseInt($(this).attr("id"));
                var playState = $(this).find("playState").text();
                if (timelineId == 1) // timeline_1
                {
                    changeJQMThemeSwatch("#timeline_1", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
                else if (timelineId == 2) // timeline_2
                {
                    changeJQMThemeSwatch("#timeline_2", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
                else if (timelineId == 3) // timeline_3
                {
                    changeJQMThemeSwatch("#timeline_3", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
                else if (timelineId == 4) // timeline_4
                {
                    changeJQMThemeSwatch("#timeline_4", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
                else if (timelineId == 5) // timeline_5
                {
                    changeJQMThemeSwatch("#timeline_5", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
                else if (timelineId == 6) // timeline_6
                {
                    changeJQMThemeSwatch("#timeline_6", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }

        }
    })
}

Upvotes: 1

Views: 65

Answers (3)

elixenide
elixenide

Reputation: 44851

If all of your #timeline_x values follow this pattern, just do this:

function statusCheck()
{
    $.ajax({
        type: "GET",
        url: "/query/timelineStatus?id=1-30",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("timelineStatus").each(function(){
                var timelineId = parseInt($(this).attr("id"));
                var playState = $(this).find("playState").text();
                if(timelineId > 0 && timelineId <= 6) { // change as needed
                     changeJQMThemeSwatch("#timeline_" + timelineId, (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
            }
        })
    });
}

If you need to use different logic for some values, use switch instead:

function statusCheck()
{
    $.ajax({
        type: "GET",
        url: "/query/timelineStatus?id=1-30",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("timelineStatus").each(function(){
                var timelineId = parseInt($(this).attr("id"));
                var playState = $(this).find("playState").text();
                switch(timelineId) {
                    case 1:
                        changeJQMThemeSwatch("#timeline_1", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                    break;
                    case 2:
                        changeJQMThemeSwatch("#timeline_2", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                    break;
                    case 3:
                        changeJQMThemeSwatch("#timeline_3", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                    break;
                    case 4:
                        changeJQMThemeSwatch("#timeline_4", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                    break;
                    case 5:
                        changeJQMThemeSwatch("#timeline_5", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                    break;
                    case 6:
                        changeJQMThemeSwatch("#timeline_6", (playState == "Running" || playState == "Held at end") ? "b" : "a");
                    break;
                }
            }
        })
    });
}

Upvotes: 0

John
John

Reputation: 2755

Depending on how standard your id naming is, you could just use a small string concatenation.

function statusCheck()
{
    $.ajax({
        type: "GET",
        url: "/query/timelineStatus?id=1-30",
        dataType: "xml",
        success: function (xml) {
            $(xml).find("timelineStatus").each(function(){
                var timelineId = parseInt($(this).attr("id"));
                var playState = $(this).find("playState").text();
                if (timelineId > 0 && timelineId <= 6) {
                    changeJQMThemeSwatch("#timeline_" + timelineId, (playState == "Running" || playState == "Held at end") ? "b" : "a");
                }
            });
        }
    });
}

Upvotes: 1

ponciste
ponciste

Reputation: 2229

what about doing it dynamically?

changeJQMThemeSwatch("#timeline_"+timelineId, (playState == "Running" || playState == "Held at end") ? "b" : "a");

Upvotes: 1

Related Questions