javascript - 如何将循环值传递给 Bootstrap 模态？

Question

前言:我查看了有关将变量传递到 Bootstrap 模式的答案。他们似乎没有解决我的问题。

我正在迭代一个 JSON 对象，该对象具有图像 URL 和有关该图像的注释数组，如下所示 -

[{
    URL:"www.imageurl.com/image1.jpg", 
    COMMENTS:[
            {comment: "Hello", by: "Jane"}, 
            {comment: "World", by: "John"}
    ]
},{
    URL:"www.imageurl.com/image2.jpg", 
    COMMENTS:[
            {comment: "Ruby", by: "Ann"}, 
            {comment: "Is Better", by: "Luke"}
    ]
}]

这是一个 Node.js 应用程序，因此我使用 Jade 编写，但为了清楚起见，我将引用 HTML。因此，我正在迭代 JSON 对象(对于图像中的图像)，并且对于每个图像，我正在创建一个 <img>用 <a> 包裹的标签打开模式的标签。在模式内，我想为单击的图像显示适当的评论和作者。因此，如果“图像中的图像”指的是 image1.jpg，则模式应显示 Hello - by Jane，World - by John。

我的问题是我处于循环中，我需要将正确的图像对象传递到模式中。我该怎么做？

Answer 1

您需要将评论添加到 <img>或<a>不知何故，最简单的方法可能是使用 data-* 属性。
将 JSON 字符串化并将其放入 <img> 的 data-comments 属性中:

<img data-comments='[{"comment":"Hello","by":"Jane"},{"comment":"World","by":"John"}]'>

然后在您的点击事件中(或使用 show.bs.modal 事件，如 docs )获取目标元素的注释:

$('.link-that-opens-the-modal').on('click', function(event) {
    event.preventDefault();
    var clickedLink = $(event.currentTarget); 
    var currentImage = clickedLink.children('img'); // use .find() if necessary

    // JSON should be automatically converted to an Object
    var comments = currentImage.data('comments'); 

    // append image and comments to modal however you want and show modal
    // ...
});

(顺便说一下，您也可以在没有链接的情况下执行此操作，并将点击处理程序放在 <img> 上(如果您不需要链接)