Question

在我的项目中，我有很多Buildings，而buildings.html我使用单个图片（Building）显示每个big_image。我想要做的是每次用户点击Building时加载一个模态，这个模态允许用户看到建筑物的其他图像。

如果我在用户进入页面时加载了每个Building的模态，这将非常容易。但是，如果我这样做，页面将花费很长时间来加载（因为有很多Buildings），所以我的想法是使用jQuery的.innerHTML在用户点击时将模态html附加到页面Building，但是当我这样做时，附加的唯一代码是

`{% for building in buildings %}{% if building.pk == 1(or whatever is the pk) %}{% endif %}{% endfor %}`

可能有一种更简单的方法来实现我不知道的

这是我的代码：

buildings.js

function loadModal(objectPk){
    document.getElementById("loadModal").innerHTML =

"{% for building in buildings %}{% if building.pk == "+objectPk+" %}
<div class="modal fade mymodal in " id="myModal{{ building.pk }}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">{{ building.name }}</h4>
        </div>
        <div class="modal-body">
            <p>{{ building.short_description }}</p>
            {% for i in building.images.all %}
            <img src="{{ i.image.url }}" class="img-responsive">
            {% endfor %}
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
        </div>
    </div>
</div>
</div>{% endif %}{% endfor %}";
}

以上所有内容都在一行中。

buildings.html

<a data-toggle="modal" data-target="#myModal{{ building.pk }}" href="" onClick="JavaScript:loadModal({{ building.pk }});"></a>
<div id="loadModal"></div>

views.py 以防万一

class BuildingsModalView(generic.ListView):
    template_name = 'info/buildings.html'

    context_object_name = 'construction_list'

    queryset = Residence.objects.all() #ignore this

    def get_context_data(self, **kwargs):
        context = super(BuildingsModalView, self).get_context_data(**kwargs)
        context['building'] = Buildings.objects.all()
        # And so on for more models
        return context

Answer 1

您可以使用一些javascript来更改模态的html中的值。在此示例中，我为每个建筑创建了一个链接，其中包含img，description和name的数据属性。

然后，我将一个点击监听器添加到建筑物链接的类中。单击时，它将访问所有这些数据值并将它们弹出到模态的正确位置。

<!-- Create a unique link for every building -->
{% for building in buildings %}
<a href="#"
    class="building-link"
    data-toggle="modal"
    data-target="#building-modal"
    data-img="{{ building.img.url }}"
    data-description="{{ building.short_description }}"
    data-name="{{ building.name }}">
    {{ building.name }}
</a>
{% endfor %}

<!-- This is our blank modal, with ids for the values to be injected -->
<div class="modal fade mymodal in " id="building-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
 aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="building-name"></h4>
            </div>
            <div class="modal-body">
                <p id="building-description"></p>
                <img id="building-img" src=""/>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
            </div>
        </div>
    </div>
</div>

<!-- When a link is clicked, grab all the data values and pop them inro the modal -->
<script>
$('.building-link').click(function(){
    $('#building-name').html($(this).data('name'));
    $('#building-description').html($(this).data('description'));
    $('#building-img').src($(this).data('img'));
});
</script>

然后，唯一不做的是做所有的建筑图像。我建议只需加载一个开始，然后设置另一个端点，以便在选择一个后获得所有建筑图像。

点击每个链接的django加载模式

1 个答案: