0

値がDOMで変更されたかどうかを確認するにはどうすればよいですか? データベースからデータを取得するために Ajax 関数を呼び出しています。新しい値がプッシュされた場合、その特定の DIV を点滅させるか、アニメーションを実行したいと思います。したがって、「可用性」が変更されると、アニメーションは一度だけ行われます。値が変更された DIV のみ。

function getRealData() {
  $.ajax({
   url: 'test_api.php',
   data: "",
   dataType: 'json',
   success: function (rows) {
     var text = '';
     for (var i in rows) {
       var row = rows[i];
       var availability = row[3];
       var hostName = row[2];
       var intranet = row[6];
       var timeRespons = row[4];
       //console.log(availability);
       if (availability == 0){
         var img = "img/tick.png";
       }
       if (availability == 1){
         var img = "img/warning.png";
       }
       if (availability == 2){
         var img = "img/alert.png";
       }
       text+= '<section class="square"><h3> ' + intranet + '</h3><img src='+img+' width="70" height="70" rel='+availability+' alt="warning"/><h4><img src="img/time_icon.png" width="20" height="20" alt="clock" class="clock" /> '+ timeRespons+'</h4>';
           text += '</section>';
       }
     $("#journey").html(text);
   }
  });
}
 setInterval(getRealData, 2000); //this refreshes data every 2seconds
 getRealData(); //call the function to display data

出力は次のとおりです。

<div id="journey">
    <div class="square>availability: 0 hostName: aaa intranet: ttt timeResponse:0.124</div>
    <div class="square>availability: 0 hostName: qqq intranet: hhh timeResponse:0.064</div>
    <div class="square>availability: 0 hostName: www intranet: nnn timeResponse:0.303</div>
    <div class="square>availability: 0 hostName: rrr intranet: rrr timeResponse:0.019</div>
    <div class="square>availability: 0 hostName: eee intranet: uuu timeResponse:0.025</div>
    <div class="square>availability: 0 hostName: ggg intranet: ooo timeResponse:0.158</div>
</div>
4

2 に答える 2

0

getRealData() 簡単な解決策は、現在のテキストを含む関数の外部に変数を保持し、関数が呼び出されるたびにその変数に書き込むことです。例えば：

var currentText;
function getRealData() {
  $.ajax({
    url: "...", data: "...", dataType: "...",
    success: function(rows){
       var text = ''
       // Process text variable accordingly, as you have
       if (text != currentText){
         $("#journey").html(text).performBlinkEvent();
         currentText = text;
       }
    }
  });
}

performBlinkEvent 関数は、検索で簡単に見つけることができます。たとえば、これは見つかった 1 つの投稿です。

編集:別のオプションは、成功時にすべての要素を反復処理し、含まれているクラス<section class="square">全体ではなく、成功時に各要素を書き込むことです:#journey

function (rows) {
  // Get all squares and iterate over each
  var squares = $("#journey > .square").each( function(i) {
    var row = rows[i];
    var availability = row[3];
    var hostName = row[2];
    var intranet = row[6];
    var timeRespons = row[4];
    // construct img var based on availabiliy

    var text = ... // Construct content of <section class="square">

    if ( $(this).text() != text ){
      $(this).html(text).performBlink();
     }

  });
}

これは、セクションが既にページ上にあることを前提としています。これは、公正な前提だと思います。また、受け取る行とページ内のセクション数が 1 対 1 で対応していると想定しています。これが真でない場合 (つまり、四角形の数が応答ごとに変化する場合)、さらにロジックが必要になります。

2 番目のコード スニペットのJSFiddleを次に示します。いくつかの要素にデータを入力してから、古いデータといくつかの新しいデータを含むサンプル レスポンスを作成します。関数は、どのデータを挿入する必要があるかを正しく判断し、更新された要素を強調表示します。

コールバックが受信する特定のデータに適応させる必要があります (質問へのコメントで指摘したように、JSON 応答から配列の配列を実際に受信する可能性は低いようです)。あなたの目標。

于 2013-07-19T13:22:53.743 に答える