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 - Jane，World - by John。

我的问题是我在一个循环中，我需要将模态传递给正确的图像对象。我该怎么做？

Answer 1

您需要以某种方式将评论添加到<img>或<a>，最简单的方法可能是使用data- *属性。
将JSON字符串化并将其放在<img>：

的数据注释属性中

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

然后在您的点击事件中（或使用像docs中的show.bs.modal事件）获取目标元素的注释：

$('.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>上）

如何将循环值传递给Bootstrap模式？

1 个答案: