我有一些类别(标题为“动物”和“杂项”等),单击类别会打开一个模式——理想情况下,我希望该模式也显示类别标题。如何将特定的 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);
})
控制台.log:
[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 );
});
基本上,您可以使用需要传递给模式的数据设置任意 data-
属性,然后在触发事件 show.bs.modal
时读取它。
evt.latedTarget
为您提供调用者元素的 HTML,因此您可以使用 jQuery .data()
方法轻松获取所需的值。
完整的工作示例: https://codepen.io/anon/pen/gyNgjx?editors=1010
已更新
我做了一些更正(我的版本略有修改,但逻辑是一样的):https://jsfiddle.net/18Lb9caj/
主要是,我删除了克隆元素中的相同 ID:您不应该在同一页面中的多个 DOM 元素上使用相同的 ID。
然后我使用了不同的方法来使用 jQuery 过滤元素。
关于javascript - 将特定的 JS 对象值附加到它被单击的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55938824/