背景
我正在使用 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 条推文。响应存储在$string中作为 json_decoded 字符串。
我的问题:
我需要循环遍历 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 文件，并且我的 token 和 key 已被编辑。
<?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 中。
最佳答案
您在这一行中错过了一些连接运算符。
// 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 - 使用 php foreach 循环使用 php 变量创建 DOM ID，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56349725/