javascript - 如何使用 javascript 使用来自 php 函数的数组元素填充 <div> 元素？

Question

我有一个 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 是数组的长度):

Element 1

Element 1

Element 1

...

然而，这不是我想要的，我想要的结果是返回数组中的所有元素:

Element 1

Element 2

Element 3

...

那么，我该如何解决这个问题呢？

Answer 1

首先。请停止混合不同的语言 :) 那是丑陋和糟糕的风格。将它们分开。如果它是一个文件，请使用隐藏的 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>