0

すぐに話します。

レイアウト.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 構造を変更する必要があるかどうかは気にしません。

たとえば、2 つが同時に使用されない場合、常に 4 つの「コーナー」div を使用するのは良くありません。また、Ajax の応答は要求ごとに変わるため、新しいデータが入力されると div がすばやく「点滅」することがあります。これも厄介です。

読んでくれてありがとう。

4

2 に答える 2

3

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);
   }
}
于 2012-04-12T18:27:41.143 に答える
0

以下は、いくつかのマイナーな変更です。言ってみて、

注: 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");
 }
}
于 2012-04-12T18:51:47.913 に答える