1

わかりました、私は今大きな頭痛を抱えており、これを数日間解決しようとしていますが、成功していません. setInterval 内にあり、2 秒ごとにデータベースから新しいデータを取得する Ajax 関数があります。

Ajax は、データベースからの動的データを数値として使用して「div」を作成します。今、私が実装したいのは、新しいデータがプルされたとき、またはDOMのテキストまたは値が変更されたときに、その特定のdivにアニメーションを実行させたいということです。

背景色を赤に変更してからデフォルトの色に戻すか、div ボーダーが 3 回ちらつくなどとしましょう。どういうわけか、この作業を行うことができません。そして、さまざまなイベントリスナーを試しましたが、うまくいきませんでした。

Ajax のコードは次のとおりです。

$(document).ready(function () {



             //function the get data from database
             function getRealData() {
                 $.ajax({
                     url: 'test_api.php',
                     data: "",
                     dataType: 'json',
                     success: function (rows) {

                         var text = '';

                         var text2 = '';

                         for (var i in rows) {

                             var row = rows[i];


                             var timeRespons = row[4];

                             text+= '<div class="square"><h4>Time Response: '+ timeRespons+'</h4>';

                             text += '</div>';

                             }

                         $("#journey").html(text);

                        }
                 });


             }

             //this refreshes data every 2seconds
             setInterval(getRealData, 2000);

             //call the function to display data
             getRealData();

   });

出力は次のとおりです。ここに画像の説明を入力

時間応答が変化した場合、背景を 2 秒間赤くしてから元に戻します。助けてくれて本当にありがとうございます ：）

4

2 に答える 2

2

応答間の値を比較する場合は、常に最後の応答を格納するローカル変数を作成できます。

$(document).ready(function () {
    var lastResponse = null;

AJAX 応答が成功するたびに、新しい応答と最後の応答を比較し、新しい div をアニメーション化する必要があるかどうかを判断します。

success: function (rows) {

    var text = '';
    var text2 = '';
    for (var i in rows) {
        var row = rows[i];
        var timeRespons = row[4];
        if (lastResponse && lastResponse[i][4] !== timeRespons)
        {
            // this specific 'row' has a different value than last time
            text += '<div class="square" style="background-color:red;"><h4>Time Response *changed*: '+ timeRespons+'</h4></div>';
        }
        else
        {
            // otherwise
            text += '<div class="square"><h4>Time Response: '+ timeRespons+'</h4></div>';
        }
    }

    $("#journey").html(text);

    // save this response as last response
    lastResponse = rows;
}
于 2013-07-22T16:06:03.760 に答える