php - 使用 php foreach 循环创建带有 php 变量的 DOM ID
问题描述
背景
我正在使用 Twitter 的 Javascript 工厂函数嵌入推文。文档在这里。
这个 Twitter 的 Javascript 嵌入函数：
twttr.widgets.createTweet(
'20',
document.getElementById('container'),
{
theme: 'dark';
}
);
文档说明文档中需要一个 DOM ID 为“容器”的元素。
<div id="container"></div>
我在用这个功能做什么
上面由 Twitter 文档提供的示例嵌入了一条 ID 为“20”的推文。在我的页面上，我使用searchTweets查询的 JSON 响应中提供的 ID 嵌入了关于特定主题的前x条推文。响应存储为 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.ini 中。
解决方案
您错过了这一行中的一些 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标签之外的评论。其他一切都很好。