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

【问题标题】：How do you pass looping values to a Bootstrap modal?如何将循环值传递给 Bootstrap 模式？
【发布时间】：2014-12-09 05:53:04
【问题描述】：

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

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

[{
    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> 标记包裹。在模态框内，我想为单击的图像显示适当的 cmets 和作者。因此，如果“图像中的图像”指的是 image1.jpg，则模式应显示 Hello - by Jane，World - by John。

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

【问题讨论】：

参见 Bootstrap 文档中的 "Varying modal content based on trigger button" 示例。

标签： javascript html json twitter-bootstrap pug

【解决方案1】：

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

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

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

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

【讨论】：