javascript - 如何在 django 框架中将不同用户的多条推文嵌入到 HTML 中？

Question

我正在 Django 框架中以字典的形式将数据从views.py 传递到results.html。字典的格式如下

“推文”:(tweet_analysis、tweet_id)

现在在 results.html 中，由views.py调用，我试图嵌入传递到 results.html 的所有推文，但以下代码仅显示一条嵌入的推文。

dicPositive:这是包含所有推文数据的字典

    {% for tweet, tweet_feel in dicPositive.items %}

        <div id="tweet" tweetID="{{tweet_feel.1}}"></div>

            <script sync src="https://platform.twitter.com/widgets.js"></script>

            <script>
              window.onload = (function(){

                var tweet = document.getElementById("tweet");
                var id = tweet.getAttribute("tweetID");

                twttr.widgets.createTweet(
                  id, tweet,
                  {
                    conversation : 'none',    // or all
                    cards        : 'hidden',  // or visible
                    linkColor    : '#cc0000', // default is blue
                    theme        : 'light'    // or dark
                  })
                .then (function (el) {
                  el.contentDocument.querySelector(".footer").style.display = "none";
                });

              });
            </script>

        <!-- <li>{{tweet}} &ndash;&gt;  {{tweet_feel.0}}  &ndash;&gt; {{tweet_feel.1}}</li> -->
    {% endfor %}

Answer 1

这是因为您对循环时创建的多个 HTMLElement 使用了相同的 id。

You must add loop counter to id attribute of div and also when you are fetching it using getElementById inside script tag

{% for tweet, tweet_feel in dicPositive.items %}

    <div id="tweet_{{forloop.counter}}" tweetID="{{tweet_feel.1}}"></div>

    <script sync src="https://platform.twitter.com/widgets.js"></script>
    <script>
       window.onload = (function(){
           var tweet = document.getElementById("tweet_{{forloop.counter}}");

           # Rest of your code
           ...

    </script>

{% endfor %}