如何使用javascript从php函数中用数组元素填充<div>元素？
如何使用javascript从php函数中用数组元素填充<div>元素？
提问于 2017-02-19 16:27:45
我有一个php函数，它返回一个RSS数据数组，我想将PHP和javascript结合起来。因此，我执行了以下步骤：
1-从PHP函数返回数组；
2-使用foreach对返回数组中的每个元素进行循环；
3-使用javascript创建<div>元素，并使用数组带来的数据填充每个元素，并添加动态效果。
这是我的代码：
<script>
<?php
header("Content-Type: text/javascript; charset=utf-8");
foreach(getFeed() as $article){
?>
setInterval(function() {
createDiv();
},5000);
function createDiv() {
document.getElementById("test").appendChild(document.createElement("DIV"));
$("#test").append('<div ><h4 id="title"><?php echo $article["title"]; ?></h4><p id="content"><?php echo $article["description"]; ?></p>');
}
<?php
}
?>
</script>
<div id= "test">
</div>问题是我得到了n个重复的元素(n是数组的长度)：
要素1 要素1 要素1 ..。
但是，这不是我想要的结果，我希望返回数组中的所有元素：
要素1 要素2 要素3 ..。
那么，我该如何解决这个问题呢？
回答 3
Stack Overflow用户
发布于 2017-02-19 16:36:18
第一。请停止混合不同的语言:)这是丑陋和糟糕的风格。把他们分开。如果是一个文件，使用隐藏的html标记来隐藏它们。
<?php
echo '<input id="hiddenField" type="hidden" value="'.json.encode(getFeed()).'">';
?>
<script type="text/javascript">
var myArrayAsString = $('#hiddenField').val();
var myArray = JSON.parse(myArrayAsString);
// [{artNo: 1}, {artNo: 2}, ...]
// now you can do what ever you want with a result array in javascript
</script>Stack Overflow用户
发布于 2017-02-19 16:41:13
首先，梳理脚本语言常常令人头疼。
我建议您使用一个php serer侧调用来单独返回您的对象(最好在json中)，然后在您的javascript中调用该服务，这样就可以很好地分离关注点。
另外，查看我看到的代码，您每次循环时都要重新创建createDiv方法，这样您就得到了该函数的多个实例，所以当您的setiInterval触发时，它只会继续拾取您创建的第一个createDiv方法，从而使您不必使用第一个div的多个实例。
编辑javascript代码
for (var article in feed) {\n
$("#test").append('<div class="post-id-' + article.id + '"><h4 id="title">' + article.title + '</h4><p id="content">' + article.description + '</p>');
}Stack Overflow用户
发布于 2017-02-19 16:47:17
看看那个。
<script>
<?php
foreach(getFeed() as $article){
?>
setInterval(function() {
$("#test").append('<div class="post-id-<?php echo $article["id"] ?>"><h4 id="title"><?php echo $article["title"]; ?></h4><p id="content"><?php echo $article["description"]; ?></p>');
}, 5000);
<?php
}
?>
</script>
<div id= "test">
</div>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42329755
复制相关文章
相似问题
腾讯云开发者
