Question

我会直截了当。

的layout.html

<table>
 <tr>
  <td><div id="corner1"></div><div id="c11"></div><div id="c12"></div></td>
  <td><div id="corner2"></div><div id="c21"></div><div id="c22"></div></td>
 </tr>
 <tr>
  <td><div id="corner3"></div><div id="c31"></div><div id="c32"></div></td>
  <td><div id="corner4"></div><div id="c41"></div><div id="c42"></div></td>
 </tr>
</table>
<input type="hidden" value="12" name="tableid" />

main.js

populateID = setInterval(Populate, 1000);
function Populate() {
 $.ajax({
  url: 'jquery/populate.php',
  data: 'tableid=' + $("#tableid").val(),
  success: function(data) {
   fillem(data);
  }
 });
}

function fillem(data) {
 if(data.c1) {
  $("#c11").html(data.c1);
  $("#c12").html(data.filler);
 }else{
  $("#c11").html(data.filler);
 }
 if(data.c2) {
  $("#c21").html(data.c2);
  $("#c22").html(data.filler);
 }else{
  $("#c21").html(data.filler);
 }
 if(data.c3) {
  $("#c31").html(data.c3);
  $("#c32").html(data.filler);
 }else{
  $("#c31").html(data.filler);
 }
 if(data.c4) {
  $("#c41").html(data.c4);
  $("#c42").html(data.filler);
 }else{
  $("#c41").html(data.filler);
 }

 if(data.timer) {
  $("#timer").html(data.timer);
 }else{
  $("#timer").html("");
 }

 if(data.corner) {
  $("#corner" + data.corner).html("ACTIVE");
 }
}

我很确定这可以通过更有效的方式完成，我不在乎它是否涉及更改DOM结构。

例如，当没有两个同时使用时，总是有4个“角落”div听起来很糟糕。由于ajax响应会在每次请求时发生变化，因此在填充新数据时有时会快速“闪烁”，这也很烦人。

感谢阅读。

Answer 1

将data.c#转换为数组，因此它是data.c[1]，然后使用简单的for()循环来仅执行SINGLE输出块。

for (i = 1; i <= 4; i++) {
   if(data.c[i]) {
       $('#c' + i + '1').html(data.c[i]);
       $('#c' + i + '2').html(data.filler);
   }
}

Answer 2

以下是一些小修改。试着让我知道，

注意： data['c'+i]将评估与data.c1，data.c2，data.c3和data.c4相同的内容

function fillem(data) {
   for (var i = 1; i <= 4; i++) {
       if (data['c'+i]){
          $('#c'+i+'1').html(data['c'+i]);
          $('#c'+i+'2').html(data['filler']);
       } else {
          $('#c'+i+'1').html(data['filler']);
       }
   }

 if(data.timer) {
  $("#timer").html(data.timer);
 }else{
  $("#timer").html("");
 }

 if(data.corner) {
  $("#corner" + data.corner).html("ACTIVE");
 }
}

通过指定的时间间隔填充页面的最有效方法？

2 个答案: