如何在 django 模板中为每张卡片切换设计答案

【问题标题】：How to switch design for each cards in django templates如何在 django 模板中为每张卡片切换设计
【发布时间】：2020-02-26 06:02:48
【问题描述】：

如何在 for 循环中为每个数据在不同的卡片设计之间切换。

<div class="col-1-of-3">
    <div class="card">
     ...
    </div>
</div>

<div class="col-1-of-3">
    <div class="card">
     ...
    </div>
</div>

<div class="col-1-of-3">
    <div class="card">
     ...
    </div>
</div>

这三张卡有不同的设计，目前在Django模板中为每个循环切换这些卡时遇到了麻烦。

{% for cont in data %}
   {% ifequal forloop.counter|divisibleby:"3" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifequal %}

   {% ifequal forloop.counter|divisibleby:"2" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifequal %}

   {% ifnotequal forloop.counter|divisibleby:"2" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifnotequal %}
{% endfor %}

第三张卡逻辑错误。我需要更改此逻辑，以便对于每个循环，每张卡片都需要交替显示。另一个挑战是，在 3 次循环之后它应该关闭该部分，因为连续只允许 3 张牌。

<section class="section-tours" id="section-tours">

            {% ifequal forloop.counter|divisibleby:"3" True %}
            {% endifequal %}

            {% ifequal forloop.counter|divisibleby:"2" True %}
            {% endifequal %}

            {% ifequal forloop.counter|divisibleby:"2" True %}
            {% endifequal %}

</section>

【问题讨论】：

您的数据中有多少条记录要尝试迭代？此外，您试图通过 2 和 3 的可分性来分隔卡片，其中的数字可以被 2 和 3 整除，例如 6,12 等等。这不是很有效
卡片列出了图书馆中所有可用的书籍，内容是动态的，可以添加到仪表板中。三张卡内迭代应该怎么做，我知道上面程序中的逻辑不正确。
有没有 Django 模板过滤器来获取提醒？

标签： django django-templates

【解决方案1】：

您可以为此使用内置 django cycle 模板标签。您可以更新您的 html 并添加如下循环模板标签来更改第一张、第二张和第三张卡片的设计。

{% for cont in data %}
    <div class="{% cycle 'col-1-of-3' 'col-2-of-3' 'col-3-of-3' %}">
        <div class="card">
         ...
        </div>
    </div>
{% endfor %}

希望对你有帮助:)

【讨论】：

3张不同风格的卡片，这将如何在打印3张卡片后交替选择3张不同卡片中的一张并关闭
标签。数据库中有很多可用的卡片，因此为了连续打印不同的设计，我们需要在每个循环中选择不同的卡片。打印的三张卡片应该在
标签中，以便制作新的一行。跨度>
三种不同风格的3张卡片。在这种情况下，循环标签将帮助您为 3 张卡片添加 CSS 类。在第一次迭代中，它将首先添加，在第二次迭代中，它将添加第二个，依此类推。您必须为打开和关闭部分标签应用不同的逻辑。更新您的问题并添加具有期望结果的准确信息，以便为您提供帮助。

【解决方案2】：

打印 3 张卡片后关闭部分。

<section class='section-tours' id='section-tours'>
  <div class="row">
{% for cont in data %}

    {% cycle 'tools/col-1-of-3.html' 'tools/col-2-of-3.html' 'tools/col-3-of-3.html' as tmp silent %}
    {% include tmp %}

    {% cycle "" "" "</div> </section><section class='section-tours' id='section-tours'>" %}

{% endfor %}
    </section>

【讨论】：

【解决方案3】：

测试下面的代码并告诉我它是否有帮助，因为我还没有测试过。

我已经对前三个值的 for 循环进行了切片，如果您想重复相同的操作，请为相同的代码更改切片。

{% for cont in data|slice:":3" %} #i have sliced it for first three values only
   {% if forloop.first %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endif %}

   {% ifequal forloop.counter|divisibleby:"2" True %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endifequal %}

   {% if forloop.last %}

    <div class="col-1-of-3">
        <div class="card">
         ...
        </div>
    </div>

   {% endif %}
{% endfor %}

【讨论】：

只有前三张卡片可见，其他数据未显示在卡片中。并且
没有实现。