Django For-Loop 和 Div ID

Question

我正在尝试遍历一个投资组合，但遇到了障碍。我正在使用 Bootstrap 并且想使用 Modal 灯箱来显示图像。我在通过 div 循环时遇到问题，这将允许我的灯箱有一个 absolute_url。当我遍历 url 时，url 正在发生变化，但是当您单击图像以调出灯箱时，由于 div id，它只会拉出第一个 div。我不是 java 或 jquery 的人，只知道 django 和 python 并且很难过。

index.html

    <section id="three" class="no-padding">
    <div class="container-fluid">
        <div class="row no-gutter">
        {% for sites in portfolio %}
            <div class="col-lg-4 col-sm-6">
                <a href="#galleryModal" class="gallery-box" data-toggle="modal" data-src="{{sites.image.url}}">
                    <img src="{{sites.image.url}}" class="img-responsive" alt="Image 1">
                    <div class="gallery-box-caption">
                        <div class="gallery-box-content">
                            <div>
                                <i class="icon-lg ion-ios-search"></i>
                            </div>
                        </div>
                    </div>
                </a>
            </div>
            <div id="galleryModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="//placehold.it/1200x700/222?text=..." id="galleryImage" class="img-responsive" />
                        <p>
                            <br/>
                            <a href="{{ sites.get_absolute_url }}"><button class="btn btn-primary btn-lg" aria-hidden="true">View Details <i class="ion-document"></i></button></a>
                            <button class="btn btn-primary btn-lg" data-dismiss="modal" aria-hidden="true">Close <i class="ion-android-close"></i></button>
                        </p>
                    </div>
                </div>
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

views.py

def home(request):
about = About.objects.latest('timestamp')
concepts = Concept.objects.order_by('?')[:3]
portfolio = Portfolio.objects.all()[:6]
template = "index.html"
context = {
    "about": about,
    "concepts": concepts,
    "portfolio": portfolio,
}
return render(request, template, context)

js

$('#galleryModal').on('show.bs.modal', function (e) {
   $('#galleryImage').attr("src",$(e.relatedTarget).data("src"));
});

Answer 1

尝试将{{ forloop.counter }} 添加到您的 id 属性中：

<div id="galleryModal_{{ forloop.counter }}" ...> id="galleryImage" 

和

<a href="#galleryModal" ...>
<img src="..." id="galleryImage_{{forloop.counter}}" ..>

然后每个块的js：

$('#galleryModal_1').on('show.bs.modal', function (e) {   $('#galleryImage_1').attr("src",$(e.relatedTarget).data("src"));

});

请参阅documentation 以了解如何使用forloop.counter