Задний план

Я встраиваю твиты с помощью заводской функции Twitter Javascript. Документация здесь.

Функция встраивания Javascript в Twitter:

    twttr.widgets.createTweet(
      '20',
      document.getElementById('container'),
      {
        theme: 'dark';
      }
    );

В документации указано, что в документе необходим элемент с идентификатором DOM «контейнер».

    <div id = "container"></div>

Что я делаю с этой функцией

Приведенный выше пример, предоставленный документацией Twitter, включает в себя твит с идентификатором «20». На моей странице я встраиваю первое количество твитов Икс по определенной теме, используя идентификатор, указанный в ответе JSON на запрос поискТвиты. Ответ сохраняется в $string как строка json_decoded.

Моя проблема:

Мне нужно перебрать элементы в ответе JSON, чтобы получить идентификаторы твитов, чтобы поместить их в функцию twttrwidgets.createTweet.

В настоящее время я жестко кодирую функцию createTweet четыре раза — единственный динамический бит — это создание элементов и идентификаторов DOM для передачи каждой из функций.

Попытка 1: цикл Foreach создает и увеличивает идентификаторы

    <?php

    $i = 1;
    foreach ($string as $tweets)
    {
    //echo '<div id = "tweet'.$i'" tweetID'.$i' = "'$tweets['id']'"></div>';
    ?>

      <div id = "tweet.<?php echo $i?>" tweetID.<?php echo $i?> = "<?php echo         $tweets['id']?>"></div>
    <?php
    //  echo "<div id='tweet' tweetID='1130852255945486337'></div>"
      $i++;
    }
     ?>

Примечание. Я подтвердил, что $tweets['id'] дает идентификатор в ответе json, поскольку я тестировал, просто распечатав все $tweets['id'] на странице.

Цель состоит в том, чтобы этот цикл создал что-то вроде этого

    <div id = "tweet1" tweetID1 = "123abc"></div>
    <div id = "tweet2" tweetID2 = "123abc"></div>
    <div id = "tweet3" tweetID3 = "123abc"></div>
    <div id = "tweet4" tweetID4 = "123abc"></div>

Я понимаю, что в настоящее время у меня есть цикл, он создаст столько div, сколько элементов в JSON - на данный момент меня это устраивает.

При этом я бы создал твиты со следующим кодом.

    <script>

    window.onload = (function(){

    var tweet1 = document.getElementById("tweet1");
    var id1 = tweet1.getAttribute("tweetID1");

    var tweet2 = document.getElementById("tweet2");
    var id2 = tweet2.getAttribute("tweetID2");

    var tweet3 = document.getElementById('tweet3');
    var id3 = tweet3.getAttribute("tweetID3");

    var tweet4 = document.getElementById("tweet4");
    var id4 = tweet4.getAttribute("tweetID4");

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

  //3 more blocks just like twttr.widgets.createTweet(){...} with correct params

Это не сработало, и я не могу понять, почему. Этот код работает, если я жестко кодирую 4 идентификатора, как я упоминаю в цели цикла. Вот и снова.

    <div id = "tweet1" tweetID1 = "123abc"></div>
    <div id = "tweet2" tweetID2 = "123abc"></div>
    <div id = "tweet3" tweetID3 = "123abc"></div>
    <div id = "tweet4" tweetID4 = "123abc"></div>

Вот весь мой php-скрипт. Обратите внимание, что это не включает файл APIwrapper, включенный в начало, и мои токены и ключи были отредактированы.

    <?php

    //echo "<h2>Simple Twitter API Test</h2>";

    require_once('TwitterAPIExchange.php');

    /** Set access tokens here - see: https://dev.twitter.com/apps/ **/
    $settings = array(
        'oauth_access_token' => "",
        'oauth_access_token_secret' => "",
        'consumer_key' => "",
        'consumer_secret' => ""
    );

    $url = "https://api.twitter.com/1.1/statuses/user_timeline.json";
    $requestMethod = "GET";
    if (isset($_GET['user']))  {$user = preg_replace("/[^A-Za-z0-9_]/", '', $_GET['user']);}  else {$user  = "iagdotme";}
    if (isset($_GET['count']) && is_numeric($_GET['count'])) {$count = $_GET['count'];} else {$count = 20;}
    $getfield = "?screen_name=$user&count=$count";
    $twitter = new TwitterAPIExchange($settings);
    $string = json_decode($twitter->setGetfield($getfield)
    ->buildOauth($url, $requestMethod)
    ->performRequest(),$assoc = TRUE);
    if (array_key_exists("errors", $string)) {echo "<h3>Sorry, there was a problem.</h3><p>Twitter returned the following error message:</p><p><em>".$string[errors][0]["message"]."</em></p>";exit();}


     ?>


    <?php

    $i = 1;
    foreach ($string as $tweets)
    {
      echo '<div id = "tweet'.$i'" tweetID'.$i' = "'$tweets['id']'"></div>';
    //  echo "<div id='tweet' tweetID='1130852255945486337'></div>"
      $i++;
    }
     ?>


    <html><body>

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

    <script>

      window.onload = (function(){

        var tweet1 = document.getElementById("tweet1");
        var id1 = tweet1.getAttribute("tweetID1");

        var tweet2 = document.getElementById("tweet2");
        var id2 = tweet2.getAttribute("tweetID2");

        var tweet3 = document.getElementById('tweet3');
        var id3 = tweet3.getAttribute("tweetID3");

        var tweet4 = document.getElementById("tweet4");
        var id4 = tweet4.getAttribute("tweetID4");

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

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

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

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

      });

    </script>
    </body></html>

Я считаю, что проблема заключается в динамическом создании элементов <div></div>, но я не могу понять, почему на данный момент. Я делаю это правильно? Я уверен, что есть гораздо более эффективный способ сделать это, но похоже, что он должен работать.

Моя проблема уникальна для возможного дубликата, потому что проблема не в привязке события к идентификатору, а в фактическом создании самого идентификатора, и моя проблема конкретно в php.