Question

我正在尝试将这三个API集成到我的HTML网站中。

每次后续取消前一张，只有最后一张。

HTML

  <div class="container1">
   <div id="container-table"></div>
   <div id="container-tablec"></div>
   <div id="container-tableq"></div>
   <div id="container-table"></div>
   <div id="container-table"></div>
  </div>

的JavaScript

<script>
  $('document').ready(function(){
      refreshData();
  })

  function refreshData() {
      $('#container-table').load("data.php", function(){
          setTimeout(refreshData, 10000);
      });
  }
</script>

<script>
  $('document').ready(function(){
      refreshData();
  })

  function refreshData() {
      $('#container-tablec').load("datacex.php", function(){
          setTimeout(refreshData, 10000);
      });

  }
</script>


<script>
  $('document').ready(function(){
      refreshData();
  })

  function refreshData() {
      $('#container-tableq').load("dataquad.php", function(){
          setTimeout(refreshData, 10000);
      });
  }
</script>

Answer 1

您不能拥有多个具有相同名称的功能，即使它们位于不同的<script>标记中。定义第二个refreshData时，它将覆盖第一个。{/ p>

为所有3个功能设置不同的名称。

您还可以将三个<script>块合并为一个：

<script>
  $('document').ready(function(){
      refreshData();
  });

  function refreshData() {
      $('#container-table').load("data.php", function() {
          setTimeout(refreshData, 10000);
      });
      
      $('#container-tablec').load("datacex.php", function() {
          setTimeout(refreshData, 10000);
      });
      
      $('#container-tableq').load("dataquad.php", function() {
          setTimeout(refreshData, 10000);
      });
  }
</script>

Answer 2

就像@MátéSolymosi和@JiFus所说，你不能重用元素ID或函数名。这就是你遇到问题的原因。

下面是相同的代码，但div ID已更改为类，并且函数名称根据它们的调用位置而有所区别。

更改摘要：

将div ID更改为类
将功能名称更改为唯一
将.load()函数更改为使用类名而不是ID

您当然可以将函数名称更改为您喜欢的任何名称，并且您可以使用唯一ID而不是div的类（例如container-table1，container-table2等）

<div class="container1">
   <div class="container-table"></div>
   <div class="container-tablec"></div>
   <div class="container-tableq"></div>
   <div class="container-table"></div>
   <div class="container-table"></div>
</div>

<script>
  $('document').ready(function(){
      refreshData();
  })

  function refreshData() {
      $('.container-table').load("data.php", function(){
          setTimeout(refreshData, 10000);
      });
  }
</script>

<script>
  $('document').ready(function(){
      refreshDataC();
  })

  function refreshDataC() {
      $('.container-tablec').load("datacex.php", function(){
          setTimeout(refreshDataC, 10000);
      });

  }
</script>

<script>
  $('document').ready(function(){
      refreshDataQ();
  })

  function refreshDataQ() {
      $('.container-tableq').load("dataquad.php", function(){
          setTimeout(refreshDataQ, 10000);
      });
  }
</script>

Answer 3

你不能一次又一次地使用相同的功能，因为当你第二次写它时它会超过第一个。所以只需更改您的函数名称。我认为它会起作用。

在HTML网站中集成三个API

3 个答案: