Нажав на div и добавив в него значение этого div

Question

У меня есть несколько категорийных названий, каждое из которых добавляется в отдельный div.При нажатии на любой из элементов div открывается модальное окно, и планируется добавить заголовок этой категории в модальное меню.

У меня изначально был заголовок .append в цикле for, нокаждое из названий категорий было добавлено рядом друг с другом.Должно быть, это произошло из-за цикла, но его перемещение из цикла не загружает div категории.

Затем я вставил .eq(i).append в оператор, но он отображал только первый заголовок категории (вв данном случае это «Животные»).

Есть ли способ добавить заголовок категории в какой бы модальный клик он не щелкал? Смогу ли я получить индекс этого заголовка категории идобавить его, аналогично тому, что было у меня изначально?

Фрагмент JS:

let _library,
    _categories;

getCategories(){ 
    return _categories;
}

loadCategories(){
    let categs = _categories

    let htmlElems = "";
      for (var i = 0; i < categs.length; i++) {
           htmlElems += "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal'>" + categs[i].Title + "</div>";
           $(".modal-title").eq(i).append(categs[i].Title); // ---------- //
      }

     let container = document.querySelector("div.top-training");
     container.innerHTML = htmlElems;
     console.log(container);

}

index.js:

$(document).on("click", '.cat-box', function(val) {
    console.log('.cat-box clicked')
    let cat  = $(this).data('category'),
        desc = $(this).find("span").last().text();

// irrelevant code

Модальный:

<div class="modal" id="modal-id" role="dialog">
<!-- ...etc -->
<div class="modal-title" id="exampleModalLabel"></div>

Answer 1

Вы можете попробовать следующий подход, чтобы решить эту проблему.

Сначала добавьте атрибут данных data-title к элементу .cat-box, чтобы сохранить данные заголовка.

htmlElems += "<div class='cat-box cat-num-" + i + "'data-target='#modal-id' data-toggle='modal' data-title='"+ categs[i].Title +"'>" + categs[i].Title + "</div>";

Когда модальный режим открыт, прочитайте данные заголовка и поместите их в .modal-title и сделайте его пустым при закрытии.

$(document).find('#modal-id').off('shown.bs.modal').on('shown.bs.modal', function (e) {
    $(document).find('.modal-title').html( $(e.relatedTarget).data('title'));
}).on('hidden.bs.modal', function (e) {
    $(document).find('.modal-title').html('');
});

Вы можете увидеть подробный пример с сайта начальной загрузки