jquery - Refactoring a large block of chained if-else statements

Question

This seems like overkill and I would like to refactor this...any suggestions

    if($(this).text() == "Grocery"){
        $(".type_changer").attr("id", "gro");
    }else if($(this).text() == "Restaurant"){
        $(".type_changer").attr("id", "res");
    }else if($(this).text() == "Bar"){
        $(".type_changer").attr("id", "bar");
    }else if($(this).text() == "Pizza Delivery"){
        $(".type_changer").attr("id", "piz");
    }else if($(this).text() == "Quick Service"){
        $(".type_changer").attr("id", "qui");
    }else if($(this).text() == "Retail"){
        $(".type_changer").attr("id", "ret");
    }else if($(this).text() == "Salon"){
        $(".type_changer").attr("id", "sal");
    }
    if($(this).attr("id").slice(-1) == 1){
        $(".number_changer").attr("id", "one1");
    }else if($(this).attr("id").slice(-1) == 2){
        $(".number_changer").attr("id", "two2");
    }else if($(this).attr("id").slice(-1) == 3){
        $(".number_changer").attr("id", "three3");
    }else if($(this).attr("id").slice(-1) == 4){
        $(".number_changer").attr("id", "four4");
    }else if($(this).attr("id").slice(-1) == 5){
        $(".number_changer").attr("id", "five5");}

Answer 1

Look here,

if($(this).text() == "Grocery"){
    $(".type_changer").attr("id", "gro");
}else if($(this).text() == "Restaurant"){
    $(".type_changer").attr("id", "res");
}else if($(this).text() == "Bar"){
    $(".type_changer").attr("id", "bar");
}else if($(this).text() == "Pizza Delivery"){
    $(".type_changer").attr("id", "piz");
}else if($(this).text() == "Quick Service"){
    $(".type_changer").attr("id", "qui");
}else if($(this).text() == "Retail"){
    $(".type_changer").attr("id", "ret");
}else if($(this).text() == "Salon"){
    $(".type_changer").attr("id", "sal");
}

You have to think all the repetitions away. What would left over? Right, the text and id values:

"Grocery", "gro"
"Restaurant", "res"
"Bar", "bar"
"Pizza Delivery", "piz"
"Quick Service", "qui"
"Retail", "ret"
"Salon", "sal"

Let hold them in some data structure. An object is an obvious choice.

var types = {
    "Grocery": "gro",
    "Restaurant": "res",
    "Bar": "bar",
    "Pizza Delivery": "piz",
    "Quick Service": "qui",
    "Retail": "ret",
    "Salon": "sal"
}

It can be accessed like an associative array with dynamic keys. Now you can use a single line:

$(".type_changer").attr("id", types[$(this).text()]);

How to replace the second part is left as exercise to you, but it boils down to the same.

---

Update: you seem to have a hard time in understanding this. Here's an explanation from my side:

When $(this).text() returns "Grocery", the above will resolve to

$(".type_changer").attr("id", types["Grocery"]);

The types["Grocery"] will in turn return "gro", so it basically ends up as

$(".type_changer").attr("id", "gro");

when $(this).text() is "Grocery".

See also:

• JavaScript Object Notation (JSON) tutorial