Javascript 动态更新列表中的数据

第一篇文章是关于堆栈溢出的

我正在创建一个YouTube流监视器，以同时监视多个流，在我尝试解决如何更新数据之前，一切都进展顺利。我连接到API，将数据转换成json格式，使页面运行良好。现在的问题是更新数据，而我可以每x秒刷新一次数据部分，这将导致嵌入式视频每次都刷新

<?php
$url = "data_template.json"; //static json for development
$json = file_get_contents($url);
$data = json_decode($json);

$html = null;

foreach ($data->data as $program) {
    $html .= "<li id='1'>
              <img src='images/test.jpg' width='100%'>
              <!--YouTube Stream <iframe> embed -->
              <button>Public</button><button disabled>Preview - Not Enabled</button>
              <h4> {$program->broadcast->title} ( {$program->broadcast->id} )</h4>
              <p id='broad'>Broadcast Status: {$program->broadcast->lifeCycleStatus} </p>
              <p>Stream Status:  {$program->stream->streamStatus}  and  {$program->stream->healthStatus} </p>
              <p>Last Updated:  {$program->stream->lastUpdate} </p>
              </li>";
        };

echo $html;

?>   

首先，我会将您的
标记更改为
标记，这在W3C标准中更为形象和简洁
接下来，您需要提出JS，它将获得您想要的元素。你应该高度考虑jQuery。对于像你这样的初学者来说，这更容易处理
最后，在创建HTML时，为以后需要用JS更新的每个元素添加一个类

例如，如果您的HTML如下所示：

<script src="//code.jquery.com/jquery-1.10.2.js"></script><!-- jQuery lib -->

<div class="video_block">
    <img src='images/test.jpg' width='100%'>
    <button>Public</button>
    <button disabled>Preview - Not Enabled</button>
    <h4><span class="title_1">Something</span> ( <span class="title_2">Something</span> )</h4>
    <p>Broadcast Status: <span class="b_status">Something</span> </p>
    <p>Stream Status:  <span class="s_status_1">Something</span>  and  <span class="s_status_2">Something</span> </p>
    <p>Last Updated:  <span class="u_status">Something</span> </p>
</div>
<div class="video_block">
    <img src='images/test.jpg' width='100%'>
    <button>Public</button>
    <button disabled>Preview - Not Enabled</button>
    <h4><span class="title_1">Something</span> ( <span class="title_2">Something</span> )</h4>
    <p>Broadcast Status: <span class="b_status">Something</span> </p>
    <p>Stream Status:  <span class="s_status_1">Something</span>  and  <span class="s_status_2">Something</span> </p>
    <p>Last Updated:  <span class="u_status">Something</span> </p>
</div>


公开的
预览-未启用
某物
广播状态：什么

流状态：某物和某物

最后更新：什么

公开的
预览-未启用
某物
广播状态：什么

流状态：某物和某物

最后更新：什么


那么jQuery可以是：

<script>
   $('.video_block').each(function(){
       $(this).find('.title_1').text("something else");
       $(this).find('.s_status_1').text("something else");
       $(this).find('.u_status').text("something else");
   });
</script>


$（'.video_block'）。每个（函数（）{
$（this.find（'.title_1'）.text（“其他内容”）；
$（this.find（'.s_status_1'）.text（“其他内容”）；
$（this.find（'.u_status'）.text（“其他内容”）；
});

希望这有帮助。
如果您想使用
getElementById（）
HTML标记必须有一个id，即
请先阅读一些基本的javascript教程。有1000人在等你是的，我已经解决了。对不起，示例中没有。问题在于
流状态：{$program->Stream->streamStatus}和{$program->Stream->healthStatus}
。如何选择每一位？如果您想使用
querySelector（“#broad”）
，那么必须有一个带有
class=“broad”
的标记，再次点击书籍和教程，因此这不是一个学习resource@RiggsFolly正如我上面所说，我还没有把它包括在示例中。我用不同的想法清理了所有的游戏，以显示原始代码。我知道如果代码与HTML不匹配，那么除了说这不可行之外，我们应该如何提供帮助脚本如何知道要处理哪个
video\u block
？因为您在最初的问题中没有提到这一点，所以我没有这样回答。是否要指定特定的块？如果是这样的话，在每个块中添加ID，然后你可以通过ID调用它。我（可能是错误的）认为，由于我的原始代码中有一个for循环，并且说我正在监视多个流，这可能是显而易见的。虽然我没有准确地使用你的代码，但它帮助了很多。谢谢
<script>
   $('.video_block').each(function(){
       $(this).find('.title_1').text("something else");
       $(this).find('.s_status_1').text("something else");
       $(this).find('.u_status').text("something else");
   });
</script>