Can Someone Walk Me Through This Line

var types = { 'Grocery': 'gro', 'Restaurant': 'res', 'Bar': 'bar', 'Pizza Delivery': 'piz', 'Quick Service': 'qui', 'Retail': 'ret', 'Salon': 'sal' } $('.type_change

Solution 1:

The $(this).text() takes the text of the current element (the <li> you're looping over in your case, unless your markup has changed).

It then uses that text as the key on the types object, basically doing types["Grocery"] when you click the "Grocery" link for example.

In JavaScript you can do types.Grocery or types["Grocery"] to access the property, which has a value of "gro".

---

The last statement is taking that same "Grocery" test and setting it as the text for the class="text" element in the parent.

Solution 2:

$(this).text() will get the text inside the current DOM element and it will use this text to find the corresponding value in the array (for example types['Restaurant']).

Solution 3:

On every element that has class 'type-changer', change it's ID to the value mapped in types to the text in the element, eg.

<divclass="type-changer">Salon</div>

would be converted to

<div class="type-changer"id="sal">Salon</div>