动态数据目标引导程序模式-Django [英] dynamic data target bootstrap modal -Django

问题描述

我有一堆帖子要显示在页面上.单击以阅读更多信息后，将显示一个自举模式.我也在用django.

I have a bunch of posts to show on a page. After clicking to read more, a bootstrap modal will come where the post will be showed. Also I am using django.

问题是我想使用for循环遍历所有帖子的查询集.

The thing is that I want to iterate through my queryset of all posts with a for loop.

我的html看起来像:

My html looks like:

 {% for post in posts %}

   <!-- Modal -->
   <div class="modal fade" id="post1" tabindex="-1" role="dialog" aria-hidden="true">
       <div class="modal-dialog" role="document">
         <div class="modal-content">
           <div class="modal-body">         

             <!-- Button trigger modal -->

             <p> {{ post.content|truncatewords:10 }}  
             <a data-toggle="modal" data-target="#post1">Post 1</a></p>       

           </div>
         </div>
      </div>
    </div>
 {% endfor %}

如您所见，在这里，在显示模式的触发器中，有data-target="#post1"，在模式中也有id="post1".

As you can see, here, in the trigger for showing the modal, data-target="#post1" is there and in the modal, there is also id="post1".

现在可以使用一种模式了.但是我喜欢10到12篇博客文章.因此，我无法对每个数据目标进行硬编码.那我该怎么办?我不懂javascript，因此完整的引导程序解决方案可能会有所帮助.但是，我有什么解决方案或想法怎么办? 像post1将得到id1，然后post2应该得到id2.

Now it's okay for one modal. But I have like 10-12 blog posts. So I can't hardcode each of it's data-target. So what can I do? I don't know javascript, so a complete bootstrap solution maybe helpful. Nevertheless any solution or idea what can I do? Like post1 will get the id1 and then post2 should get the id2.

那么，您能帮我解决这个问题还是提供其他解决方案?这将是非常有帮助的. 我已经尝试过此帖子:如何动态更改引导程序模式数据-目标点击，但这没有帮助.

So can you please help me with this or give any other solution? It will be extremely helpful. I have tried this post: how to dynamically change bootstrap modal data-target click but that didn't help.

推荐答案

所以很简单，我需要做的是将modal-target更改为#modal{{post.id}}"，将模式id更改为modal{{post.id}}和瞧！

So it was fairly simple, what I needed to do was to change the modal-target to #modal{{post.id}}" and the id of modal to modal{{post.id}} and voila!

这篇关于动态数据目标引导程序模式-Django的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！