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为您提供了invoker元素的HTML，因此您可以使用jQuery .data()方法轻松获得所需的值。

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

已更新

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

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

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

将特定的JS对象值附加到它被单击的div上

console.log：

1 个答案:

已更新