动态更新列表中的数据

Update data in list dynamically

本文关键字：数据 列表 更新 动态      更新时间：2023-09-26

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

我

正在创建一个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 和更新的不同变量吗？

  • 首先，我会将您的<li>标签更改为<div>标签，它更美观，更简洁，更符合 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>

希望这有帮助。

相关文章：