0

我正在尝试创建一个包含名称列表的页面。每个名称都有自己的模态（注意：这是一个for循环，因此为每个名称创建一个模态），其中包含名称、描述和图像。显示名称和标题，但不显示图像。

<!-- Toggle Button -->
{% for name in User_list %}
<li><a data-toggle="modal" data-id="{{ name }}" data-description="{{ name.description }}" data-image="{{ name.image }}" title="Add this item" class="open-AddBookDialog " href="#addBookDialog">{{ name }}</a></li>
{% endfor %}



<!-- Modal -->
<div class="modal hide fade" id="addBookDialog">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
        <h3 id="nameId" /></h3>

    </div>
    <div class="modal-body">
        <p id="nameDescription" /></p>
        <div id='images'></div>


    </div>
</div>

<!-- JavaScript -->
<script type="text/javascript">
$(document).on("click", ".open-AddBookDialog", function () {
 var myNameId = $(this).data('id');
 var myNameDescription = $(this).data('description');
 var thumb = $(this).data('image');
 $(".modal-header #nameId").html( myNameId );
 $(".modal-body #nameDescription").html( myNameDescription );
 $(".modal-body #images").html("<img>" ,{src: thumb});
 //.html( myNameImage )
 // As pointed out in comments, 
 // it is superfluous to have to manually call the modal.
 });
</script>

我做错了什么，我该如何纠正（注意：我正在使用 Twitter-Bootstrap）

4

1 回答 1

1

该html()方法不接受两个参数。您正在尝试创建一个元素并初始化它的一些属性。尝试正确创建并附加它：

$("#images").empty().append($("<img>", {src: thumb}));

演示：http: //jsfiddle.net/tGbG6/

<div id='images'></div>元素id应该是唯一的，因此您可以使用选择器（$("#images")对于您拥有的其他选择器也是如此）...否则 jQuery 会做一些额外的不必要的工作。

参考：

于 2013-07-23T14:27:25.057 回答