Refactoring a large block of if-else chaining operators

Question

This seems redundant and I would like to reorganize it ... 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 at 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 about all reps. What will remain? Right, the text and id values ​​are:

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

Let them be stored in some data structure. The facility is an obvious choice.

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

Access to it can be obtained as an associative array with dynamic keys. Now you can use one line:

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

How to replace the second part remains an exercise for you, but it boils down to the same.

---

Update : you find it hard to understand . Here is an explanation on my part:

When $(this).text() returns "Grocery" , the above will be resolved

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

types["Grocery"] in turn return "gro" , so it basically ends up like

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

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

See also:

• JavaScript Objects Tutorial (JSON)

Answer 2

started writing pseudo-code for the switch statement, and then thought about it:

 //make your 2D array (or key->value pair if you like) var hash = [ ["Grocery","gro"], ["Restaurant","res"], //etc.... ]; //loop thru your text(), checking to see if it matches any 0th item in your hash foreach(e in hash) { if($(this).text() == hash[e][0] { //aha! match found $(".type_changer").attr("id", hash[e][1]); } } //disclaimer : untested code, but you should get the gist of it from this 

Answer 3

Have an array that contains a value (for example: Salon, Grocery), and also contains a replacement (for example: sal, gro) and replace it. The alternative is to just take the first three letters and type them in lower case, but this can cause problems with things that only contain 2 letters, and then a space if we assume that you will expand the list if you can’t go with a simple subscript of the first 3 letters. If you need code examples, just say :)

Answer 4

Use class instead of id as inner wrapper

use an array to store your custom text for later matching

$ ('. selector'). each (function () {}

that way you can do the general process

use array replacement method

 from = ['Grocery','Restaurant'] to = ['gro','res'] 

Answer 5

 var textToVal = { "Grocery" : "gro", "Restaurant" : "res" // and so on ... }; for (var text in textToVal) { if ($(this).text() == text) $(".type_changer").attr("id", textToVal[text]); }