通过 JavaScript 在 Django 中显示图像

Question

我正在尝试创建一个包含名称列表的页面。每个名称都有自己的模态（注意：这是在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）

Answer 1

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

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

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

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

参考资料：

• html(): http://api.jquery.com/html/
• append(): http://api.jquery.com/append/
• http://api.jquery.com/jQuery/#creating-new-elements