如何使用 javascript 更改任何标签的 ID？

Question

HTML代码：-

{% for post in posts %}

<article class="media content-section">

    <div class="media-body">

        <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>

        <div class="article-metadata">

            <a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>

            <div class="float-right">

                <small class="text-muted">Category</small>

                <small class="text-muted">{{ post.date_posted }}</small>

            </div>

            <div style="float:right;">

                <img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">

                    <p style="float: right; display: inline !important;" id="ViewCount">

                    

                    </p>

                </img>

            </div>

        </div>

        <p class="article-content">{{ post.content|truncatechars:200|safe }}</p>

    </div>

    <script>

        function changeid ()

        {

        var e = document.getElementById('post_title');

        e.id = 'post_title_1';

        var e = document.getElementById('ViewCount');

        e.id = 'ViewCount_1';

        }

    </script>

</article>

{% endfor %}

我正在尝试更改这两个标签的 ID，但是这个脚本似乎不起作用，或者它没有被执行。我想更改该 ID，因为我想从服务器向它们插入一些数据。由于我们不能拥有相同的 ID，因此我尝试嵌入的数据默认嵌入到循环的第一次运行中。

Answer 1

您无需使用 JavaScript 在每次迭代中更改 id。您可以使用 Django 的内置模板标签来实现相同的目的forloop.counter。所以在你的情况下，它会是这样的：{% for post in posts %}<article class="media content-section">  <div class="media-body">    <h2><a id="post_title_{{ forloop.counter }}" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>    <div class="article-metadata">      <a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>      <div class="float-right">        <small class="text-muted">Category</small>        <small class="text-muted">{{ post.date_posted }}</small>      </div>      <div style="float:right;">        <img style="height:19px; width:18px;" src="{% static " blog/viewicon.png " %}">        <p style="float: right; display: inline !important;" id="ViewCount__{{ forloop.counter }}">        </p>        </img>      </div>    </div>    <p class="article-content">{{ post.content|truncatechars:200|safe }}</p>  </div></article>{% endfor %}

Answer 2

使用IIFE- IIFE（立即调用函数表达式）是一个 JavaScript 函数，一旦定义就运行。<script>&nbsp; (() => {&nbsp; &nbsp; let a = document.getElementById('post_title');&nbsp; &nbsp; a.setAttribute("id", 'post_title_1');&nbsp;&nbsp; &nbsp; let b = document.getElementById('ViewCount');&nbsp; &nbsp; b.setAttribute("id", 'ViewCount_1');&nbsp;&nbsp; })();</script>

Answer 3

尝试使用document.getElementById('footer').setAttribute('id','post_title_1')Also Make sure you are calling the changeid()function{% for post in posts %}<article class="media content-section">&nbsp; &nbsp; <div class="media-body">&nbsp; &nbsp; &nbsp; &nbsp; <h2><a id="post_title" class="article-title" href="{% url 'post-detail' post.slug %}">{{ post.title }}</a></h2>&nbsp; &nbsp; &nbsp; &nbsp; <div class="article-metadata">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a class="mr-2" href="{% url 'blog-profile' name=post.author %}">{{ post.author }}</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="float-right">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <small class="text-muted">Category</small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <small class="text-muted">{{ post.date_posted }}</small>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div style="float:right;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img style="height:19px; width:18px;" src="{% static "blog/viewicon.png" %}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p style="float: right; display: inline !important;" id="ViewCount">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </img>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="article-content">{{ post.content|truncatechars:200|safe }}</p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; function changeid ()&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('post_title').setAttribute('id','post_title_1');&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById('ViewCount').setAttribute('id','ViewCount_1')&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </script></article>{% endfor %}