Может ли кто-нибудь провести меня через эту линию

Question

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

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

Я понимаю, что идентификатор класса type_changer изменяется на часть этого массива, но я не понимаю types[$(this).text()]

и эта строка

$(this).parents('.select-holder').find('.text').text($(this).text());

кажется почти понятным, но я путаюсь с .parents и .find('.text').text($(this).text());

Answer 1

$(this).text() принимает текст текущего элемента (<li>, который вы зацикливаете в вашем случае, если ваша разметка не изменилась).

Затем он использует этот текст в качестве ключа наобъект types, в основном выполняющий types["Grocery"] при нажатии на ссылку «Бакалея», например.

В JavaScript вы можете сделать types.Grocery или types["Grocery"] для доступа к свойству, которое имеет значение"gro".

---

Последний оператор берет тот же тест «Бакалея» и устанавливает его как текст для элемента class="text" в родительском элементе.

Answer 2

В каждом элементе, который имеет класс 'type-changer', измените его ID на значение, сопоставленное в types с текстом в элементе, например.

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

будет преобразовано в

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

Answer 3

$(this).text() получит текст внутри текущего элемента DOM и будет использовать этот текст для поиска соответствующего значения в массиве (например, types['Restaurant']).