将特定的 JS 对象值附加到它被点击的 div答案

【问题标题】：Appending specific JS object value to the div it was clicked on将特定的 JS 对象值附加到它被点击的 div
【发布时间】：2019-05-01 15:39:12
【问题描述】：

我有一些类别（标题为“动物”和“杂项”之类的东西），单击一个类别会打开一个模态——理想情况下，我希望模态也显示类别标题。如何将特定的 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..."]

【问题讨论】：

您在哪里以及如何处理“点击”事件？
将属性data-category=... 添加到可点击元素，然后通过evt. relatedTarget 读取它（我假设您使用的是Bootstrap）
我相信 $(".modal-title").html(title);应该可以解决问题，但我无法在 atm 测试它。

标签： javascript jquery arrays object

【解决方案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，因此您可以使用 jQuery 的.data() 方法轻松获得所需的值。

完整的工作示例： https://codepen.io/anon/pen/gyNgjx?editors=1010

更新

我做了一些更正（我的版本略有修改，但逻辑相同）：https://jsfiddle.net/18Lb9caj/

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

然后我用另一种方法用 jQuery 过滤掉元素。

【讨论】：

嗨@atx，因为我的数据是通过axios进来的，我会像这样动态设置data-：jsfiddle.net/wcbufavy/1
@Bodrov 您可以在生成可点击元素时添加data-category。所以：1）通过 axios 获取您的数据 2）循环值 3）在循环内：构建您的可点击元素并添加 data-category=item.Title 4）打印输出
@Bodrov 我做了一些更正（我的版本略有修改，但逻辑相同）：jsfiddle.net/18Lb9caj 主要是，我在克隆元素中删除了相同的 ID：你不应该使用相同的同一页面中多个 DOM 元素的 ID。