动态更新列表中的数据

Question

首先 post 这里是堆栈溢出。

我正在创建一个 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;

?>

我想更新每个列表段落中的变量，但正在努力弄清楚如何获取它们。我试过下面的但它似乎不是很有效。

<script>
var x = document.getElementById("1");
    x.querySelector("#broad").innerHTML = "Hello World!";
</script>

我是否最好添加一个中间步骤并在 HTML 中添加可以单独 ID 和更新的不同变量？

Answer 1

首先，我会将您的 <li> 标签更改为 <div> 标签，这样更符合 W3C 标准，也更简洁。
接下来您需要想出能够获取您想要的元素的 JS。你应该高度考虑jQuery。对于像您这样的初学者来说更容易处理。
最后，在创建 HTML 时向每个元素添加一个 class，稍后您需要使用 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>

希望对您有所帮助。

动态更新列表中的数据

Update data in list dynamically

html

javascript

php

json

auto-update