Javascript django在单击每个链接时加载模式

在我的项目中，我有许多

建筑

，在

Buildings.html

中，我使用单个图像（

大图像

）显示每个

建筑

）。我想做的是，每当用户单击

建筑时加载一个模式，该模式允许用户查看该建筑的其他图像

如果我在用户进入页面时加载每个
构建
的模式，这将非常容易。但是如果我这样做了，页面加载将花费很长时间（因为有许多
建筑
），因此我的想法是使用jQuery的
.innerHTML
在用户单击
建筑
时将模式html追加到页面，但当我这样做时，唯一追加的代码是

`{% 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 %}";
}

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

然后，我向building链接的类添加一个click侦听器。单击时，它将访问所有这些数据值，并将它们弹出到模式的正确位置

<!-- 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>


{建筑物中建筑物的百分比%}
{%endfor%}
&时代；

粪便
$（'.building link'）。单击（函数（）{
$（'#building name'）.html（$（this.data（'name'））；
$（'#building description'）.html（$（this.data（'description'））；
$（'#building img'）.src（$（this.data（'img'））；
});

这唯一做不到的就是做所有的建筑图片。我建议您首先加载一个，然后设置另一个端点，以便在选择一个端点后获取所有建筑图像。
您可以使用一点javascript来更改模式html中的值。在本例中，我为每个建筑创建了一个链接，其中包含img、description和name的数据属性

然后，我向building链接的类添加一个click侦听器。单击时，它将访问所有这些数据值，并将它们弹出到模式的正确位置

<!-- 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>


{建筑物中建筑物的百分比%}
{%endfor%}
&时代；

粪便
$（'.building link'）。单击（函数（）{
$（'#building name'）.html（$（this.data（'name'））；
$（'#building description'）.html（$（this.data（'description'））；
$（'#building img'）.src（$（this.data（'img'））；
});

这唯一做不到的就是做所有的建筑图片。我建议您首先加载一个，然后设置另一个端点，以便在选择一个端点后获取所有建筑图像。
这很有帮助，因为您不必多次编写模式，但是，当用户进入页面时，这不会仍然加载每个建筑的所有图像吗？它会在锚标记的数据属性中打印图像位置的字符串地址，但不会加载图像，因为它不位于
src
属性中。这很有帮助，因为您不必多次编写模式，但是，当用户进入页面时，这不会仍然加载每个建筑物的所有图像吗？它会在锚定标记的数据属性中打印图像位置的字符串地址，但不会加载图像，因为它不位于
src
属性中。
<!-- 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>