Как визуализировать элементы подряд с Flask / Jinja2?

Question

Я пытаюсь перебрать список переменных на внешнем интерфейсе моего приложения. Единственное предостережение: я хочу, чтобы переменные циклически перебирали список, показывающий одну переменную за раз. Как мне этого добиться? Есть ли какая-то функциональность в Jinja2, которая позволяет вам это делать?

  <div class="vert-al" align="center">
    {% for x in [1,2,3,4,5] %}
       <span class="badge badge-danger">{{x}} alligators in the pool!</span>
    {% end for %}
  </div>

Как есть, фрагмент будет отображать строку для каждого из элементов в списке. Вместо этого я хотел бы перебрать их на месте. CSS для vert-al выглядит так:

  .vert-al{
  vertical-align:middle;
  margin-bottom: 1rem;
  margin-top: 1rem;
  }

Javascript, который изменяет и выводит переменную:

    setInterval(function(){
        $(".badge-danger").fadeOut(2100);
        $(".badge-danger").fadeIn(900);
    }, 3000);

Я не уверен, стоит ли решать эту проблему с помощью python / jinja или большего количества маршрутов js / css, поэтому любое руководство будет очень полезным!

Answer 1

Джинджа будет отображать ваши переменные только один раз при загрузке страницы. Если вы хотите просмотреть их, вам нужно убедиться, что они все есть. Затем вы можете показать / скрыть их с помощью JS.

Может быть, что-то вроде этого:

<div class="vert-al" align="center">
    {% for x in [1,2,3,4,5] %}
       <span class="badge badge-danger" id="gator-{{x}}" style="display:none">{{x}} alligators in the pool!</span>
    {% end for %}
</div>

Тогда:

for (var i = 0; i < num_gators; i++) {
 document.getElementById("gator-" + i).fadeIn(900);
}

Примечание. Не уверен насчет этого Javascript, но вы поняли идею.