Question

首先发布堆栈溢出。

我正在创建一个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时，为每个元素添加一个类，稍后需要使用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>

希望这有帮助。

动态更新列表中的数据

1 个答案: