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: