Question

我正在尝试通过数据索引将数据传递给Bootstrap Modal Box。我的html标记和javascript片段如下所示。我不知道如何从变量中填充图像，超链接和标题。

function showModal(a) {
    var id = $(this).attr("data-index");
    $("#modal-photo").html('<img src=""/>');
    $("#modal-title").html('<a href="">description goes here</a>');
    $('#myModal').modal('show')
}


<div class='post' data-index='1'>
<img src="">
<a class="desc" href="">description goes here</a>
</div>

<div class='post' data-index='2'>
<img src="">
<a class="desc" href="">description goes here</a>
</div>

<div class='post' data-index='3'>
<img src="">
<a class="desc" href="">description goes here</a>
</div>

修改我正在考虑将描述包含在段落标记中以供下面的代码使用。我不知道它是否有效的方法。

function showModal(a) {
    var photo = $("img", $(this).parent()).attr("data-index");
    var title = $("p", $(this).parent()).attr("data-index");
    $("#modal-photo").html('<img src="'+photo+'"/>');
    $("#modal-title").html('<a href="">'+title+'</a>');
    $('#myModal').modal('show')
}

但我仍然无法使用超链接：D

Answer 1

试试这个

$('.open-it').on('click', showModal);

function showModal(e) {

    var index = $(this).parent().data('index');
    console.log(index);
    //do stuff
}

this不会引用您示例中的链接。它将指向window对象。

上面的代码假定.open-it的父代包含数据。没有看到更多代码就很难分辨。

Answer 2

尝试使用数据属性。试试看这里：

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/all-you-need-to-know-about-the-html5-data-attribute/

基本上，您要做的是将数据提供给数据属性，然后使用

var yourContent = $（'＃link'）。data（'content'）;

将数据从变量data-index传递到Modal框

2 个答案: