Bootstrap JS 動態選項卡-每個導航鏈接更改相同的元素

Question

我正在嘗試創建動態卡列表。 我快完成了，但出現了一個問題。 當我更改最后一個對象的鏈接時，導航鏈接工作正常，但是當我想更改另一個對象時，相同的最后一個對象會更改。

HTML

{% extends "post/base.html" %}
{% block title %}
    <title>Home Page</title>
{% endblock title %}
{% block content %}
    {% for obj in EveryPost %}
        <div class="card text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="RU-tab" data-toggle="tab" href="#RU" role="tab" aria-controls="RU" aria-selected="false">RU</a>
                </li>
                </ul>
            </div>
            <div class="card-body tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="PL" role="tabpanel" aria-labelledby="PL-tab">
                <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_pl }}</a></h5>
                <p class="card-text">{{ obj.text_pl|truncatechars:350 }}</p>
                <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
                <div class="tab-pane fade" id="RU" role="tabpanel" aria-labelledby="RU-tab">
                <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_ru }}</a></h5>
                <p class="card-text">{{ obj.text_ru|truncatechars:350 }}</p>
                <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
            </div>
            <div class="card-footer text-muted">
                <span class="float-left">{{ obj.date|date:"d M y" }}</span>
                <span class="float-right">Przesłane przez: {{ obj.User }}</span>
            </div>
        </div>
    {% endfor %}
{% endblock content %}

Answer 1

發生這種情況是因為在 forloop 中，所有項目都可以使用“活動”類。 但是您必須對其進行過濾，以便僅針對一個項目使用此類類。 例如這個標簽應該是這樣的：

<a class="nav-link active" id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>

->

 <a class="nav-link {% if forloop.counter == 1 %} active {% endif %} id="PL-tab" data-toggle="tab" href="#PL" role="tab" aria-controls="PL" aria-selected="true">PL</a>

但也有其他標簽，你應該為他們做同樣的事情。

我忘了提一個非常重要的提示！ 除了“活動”類之外，forloop 中的所有對象的 ID (id) 也是相同的！ 這意味着任何以特殊“id”為目標的 JavaScript 函數也將適用於所有具有該 id 的元素！！ 在 html 標簽中制作不同的 id 只需這樣做：

    <a id="sth-{{ forloop.counter }}" >the link</>.  

例如，這是一個標簽。 但我可以看到你有一些其他的標簽有一個 id，並且關於你的代碼，在通過 django 呈現代碼后，所有這些標簽都將具有相同的 id。

{% for obj in EveryPost %}
    <div class="card text-center">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" id="myTab-{{ forloop.counter0 }}" role="tablist">
            <li class="nav-item">
                <a class="nav-link {% if forloop.counter==1 %} active {% endif %}" id="PL-tab-{{ forloop.counter0 }}" data-toggle="tab" href="#PL-{{ forloop.counter0 }}" role="tab" aria-controls="PL" aria-selected="true">PL</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="RU-tab-{{ forloop.counter0 }}" data-toggle="tab" href="#RU-{{ forloop.counter0 }}" role="tab" aria-controls="RU" aria-selected="false">RU</a>
            </li>
            </ul>
        </div>
        <div class="card-body tab-content" id="myTabContent-{{ forloop.counter0 }}">
            <div class="tab-pane fade show {% if forloop.counter==0 %} active {% endif ©}" id="PL-{{ forloop.counter0 }}" role="tabpanel" aria-labelledby="PL-tab">
            <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_pl }}</a></h5>
            <p class="card-text">{{ obj.text_pl|truncatechars:350 }}</p>
            <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
            <div class="tab-pane fade" id="RU-{{ forloop.counter0 }}" role="tabpanel" aria-labelledby="RU-tab">
            <h5 class="card-title"><a href="{% url 'detailpost' obj.pk %}">{{ obj.title_ru }}</a></h5>
            <p class="card-text">{{ obj.text_ru|truncatechars:350 }}</p>
            <a href="{% url 'detailpost' obj.pk %}" class="btn btn-dark float-right">Zobacz całość</a></div>
        </div>
        <div class="card-footer text-muted">
            <span class="float-left">{{ obj.date|date:"d M y" }}</span>
            <span class="float-right">Przesłane przez: {{ obj.User }}</span>
        </div>
    </div>
{% endfor %}