целевое правильное изображение для модального в шаблоне Django - PullRequest
0 голосов
/ 04 ноября 2018

Мой шаблон

<div>
<ul>
{% for image in obj.images_set.all %} 
  <li class="col-lg-4 text-center">
     <a data-toggle="modal"data-target="#myModal{{forloop.counter0}}"> 
     <img src="{{ image.image.url }}" alt=""/></a>
  </li>

{% endfor %}

</ul>
</div>


{% for image in obj.images_set.all %}
<div id="myModal{{forloop.counter0}}" class="modal fade" 
role="dialog">
 <div class="modal-dialog" style="text-align:center;">
   <div class="modal-content" style="display:inline-block;">
       <img src="{{ image.image.url }}" alt=""/>
   </div>
 </div>
</div>
  {% endfor %}

У меня есть список задач. Я зацикливаюсь на задачах, и объект представляет одну задачу. Каждая задача имеет несколько изображений (1,2 или 3). Задачи перечислены и изображения отображаются правильно. Я пытаюсь показать модальное всплывающее окно при нажатии на изображение внутри задача. Я указываю цель с помощью идентификатора, используемого для счетчика цикла. Проблема в том, что я не могу нацелить правильное изображение, так как у меня есть список изображений для каждой задачи ... ТАК, цикл for идет как 0,1,2 для изображений в первой задаче, а затем 0,1,2 также для второй задачи, и я не могу назначить уникальный идентификатор для data-target. Как мне преодолеть это?

1 Ответ

0 голосов
/ 05 ноября 2018
<div>
<ul>
{% for image in obj.images_set.all %} 
  <li class="col-lg-4 text-center">
   <a data-toggle="modal"data-target="#myModal{{image.pk}} 
{{forloop.counter0}}"> 
  <img src="{{ image.image.url }}" alt=""/></a>
  </li>

{% endfor %}

</ul>
</div>


{% for image in obj.images_set.all %}
<div id="myModal{{ image.pk }}{{forloop.counter0}}" class="modal fade" 
 role="dialog">
<div class="modal-dialog" style="text-align:center;">
 <div class="modal-content" style="display:inline-block;">
    <img src="{{ image.image.url }}" alt=""/>
 </div>
</div>
</div>
 {% endfor %}

Устранена проблема. Просто добавили image.pk к идентификатору nad, чтобы сделать идентификатор уникальным

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...