背景

Question

背景

我正在使用Twitter的Javascript工厂功能嵌入推文。文档here。

此Twitter的Javascript嵌入功能：

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

文档指出，文档中需要使用DOM ID为“容器”的元素。

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

我正在使用此功能做什么

Twitter文档提供的上述示例嵌入了一个ID为“ 20”的推文。在我的页面上，我使用来自 searchTweets 查询的JSON响应中提供的ID嵌入了有关特定主题的前 x 首条tweet。响应作为json_decoded字符串存储在$string中。

我的问题：

我需要遍历JSON响应中的元素，以获取要放入twttrwidgets.createTweet函数中的推文的ID。

我目前正在对createTweet函数进行硬编码四次-唯一的动态位是创建要传递给每个函数的元素和DOM ID。

尝试1：Foreach循环创建并增加ID

    <?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响应中给出了ID，只需将所有$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>

我了解我当前使用循环的方式，它将创建与JSON中的元素数量一样多的div-目前对我来说还可以。

这样，我将使用以下代码创建推文。

    <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个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>

这是我的整个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>元素，但是我似乎无法理解为什么。 我这样做正确吗？我敢肯定有一种更有效的方法，但这似乎应该可行。

我的问题对于可能提供的重复项是唯一的，因为问题不在于将事件附加到ID上，而在于ID本身的实际创建，而我的问题特别是在php中。

Answer 1

您错过了此行中的一些concat运算符。

// What you have
echo '<div id="tweet'.$i'" tweetID'.$i'="'$tweets['id']'"></div>';

// Correct
echo '<div id="tweet'.$i.'" tweetID'.$i.'="'.$tweets['id'].'"></div>';

还要注意Chay22关于您的输出在html标记之外的评论。其他一切都很好。

使用php foreach循环使用php变量创建DOM ID

背景

我正在使用此功能做什么

我的问题：

尝试1：Foreach循环创建并增加ID

1 个答案: