Javascript 将特定JS对象值附加到单击的div

我有一些类别（标题为“动物”和“杂项”），点击一个类别会打开一个模式——理想情况下，我希望模式也显示类别标题。如何将特定的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);
})

如果使用（或类似）打开模式：

基本上，您可以使用需要传递给模式的数据设置任意的

data-

属性，然后在触发事件

show.bs.modal

时读取该属性

evt.relatedTarget

提供调用程序元素的HTML，因此可以使用jQuery

.data（）

方法轻松获得所需的值

完整工作示例：

更新 我做了一些更正（我的版本略有修改，但逻辑是一样的）：

主要是，我删除了克隆元素中的相同ID：不应该在同一页面中的多个DOM元素上使用相同的ID

---

然后我使用另一种方法用jQuery筛选出元素。

在哪里以及如何处理“单击”事件？向可单击元素添加一个属性

data category=…

，然后通过

evt阅读它。relatedTarget

（我假设您正在使用引导）我相信$（“.modal title”）.html（title）；应该这样做，但我不能在atm上测试。您好@atx，因为我的数据是通过axios输入的，我会这样动态设置

数据-

：@Bodrov您可以在生成可点击元素时将

数据类别添加到可点击元素中。因此：1）通过axios获取数据2）循环值3）循环内部：构建可单击元素并添加
data category=item.Title
4）打印output@Bodrov我做了一些修改（我的版本有点修改，但逻辑是一样的）：主要是，我删除了克隆元素中的相同ID：不应该在同一页面中的多个DOM元素上使用相同的ID。
[object Array]["Animals", "Colors", "Miscellaneous", "New York Bo...", "Sports", "World Capit..."]

<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 );

});