Добавление определенного значения объекта JS к элементу div, по которому щелкнули

Question

У меня есть несколько категорий (такие вещи, как «Животные» и «Разное»), и нажатие на категорию открывает модал - в идеале, я хочу, чтобы модал также показывал заголовок категории. Как я могу добавить конкретное значение JS obj к модалу, по которому щелкнули? Например, если щелкнуть категорию «Животные», откроется модальное окно, и название «Животные» также должно появиться в модале.

// creating the category divs
let $host = $("#host");
for (var i = 0; i < categs.length; i++) {
  let $template = $("#template").clone();
  $template.find(".cat-box > .cat-title").text(categs[i].Title);
  $host.append($template.html());
}

$("#modal-id").on("show.bs.modal", function(evt) {

  let title = _categories.map(function(val) {
    return val.Title;
  })

  $(".modal-title").empty();
  $(".modal-title").text(title); // ----- This shows everything, [0] shows the first item...can I get [i] to work?
  console.log(title);
})

console.log:

[object Array]["Animals", "Colors", "Miscellaneous", "New York Bo...", "Sports", "World Capit..."]

Answer 1

Если вы открываете модальное с (или подобным):

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-category="My Category Name">
    My Category Name
</button>

, то в вашем событии модального шоу:

$("#myModal").on("show.bs.modal", function(evt) {

  let title = $(evt.relatedTarget).data('category');

  $(".modal-title").empty();
  $(".modal-title").text(title);

  console.log( title );

});

По сути, вы устанавливаете произвольный атрибут data- с помощьюданные, которые нужно передать модалу, а затем прочитать их при возникновении события show.bs.modal.

evt.relatedTarget дает вам HTML элемента invoker, так что вы можете использовать метод jQuery .data(), чтобы легко получить желаемое значение.

Полный рабочий пример: https://codepen.io/anon/pen/gyNgjx?editors=1010

ОБНОВЛЕНО

Я внес некоторые исправления (моя версия немного изменена, но логика та же): https://jsfiddle.net/18Lb9caj/

В основном я удалил тот же идентификатор в клонированных элементах: выне следует использовать один и тот же идентификатор для нескольких элементов DOM на одной странице.

Затем я использовал другой подход для фильтрации элементов с помощью jQuery.