Django For-Loop 和 Div ID

Posted 2023-02-24

【中文标题】Django For-Loop 和 Div ID

【英文标题】：Django For-Loop and Div ID

【发布时间】：2016-04-20 04:50:38

【问题描述】：

我正在尝试遍历一个投资组合，但遇到了障碍。我正在使用 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" >
                    <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"));
);

【参考方案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

【讨论】：

谢谢我很接近只是在我尝试时没有更改 galleryImage。非常感谢您的帮助，我会支持但没有足够的声誉