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}));

DEMO： 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

通过JavaScript在Django中显示图像

1 个答案: