亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何使用 javascript 更改任何標簽的 ID?

如何使用 javascript 更改任何標簽的 ID?

隔江千里 2023-03-18 14:50:49
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,因此我嘗試嵌入的數據默認嵌入到循環的第一次運行中。
查看完整描述

3 回答

?
FFIVE

TA貢獻1797條經驗 獲得超6個贊

您無需使用 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 %}


查看完整回答
反對 回復 2023-03-18
?
慕森王

TA貢獻1777條經驗 獲得超3個贊

使用IIFE- IIFE(立即調用函數表達式)是一個 JavaScript 函數,一旦定義就運行。


<script>

  (() => {

    let a = document.getElementById('post_title');

    a.setAttribute("id", 'post_title_1'); 

    let b = document.getElementById('ViewCount');

    b.setAttribute("id", 'ViewCount_1'); 

  })();

</script>


查看完整回答
反對 回復 2023-03-18
?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

嘗試使用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">

    <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 ()

        {

        document.getElementById('post_title').setAttribute('id','post_title_1');

        document.getElementById('ViewCount').setAttribute('id','ViewCount_1')

        }

    </script>


</article>

{% endfor %}


查看完整回答
反對 回復 2023-03-18
  • 3 回答
  • 0 關注
  • 148 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號