Question

如何检查DOM中的值是否有变化？我正在调用Ajax函数从数据库中提取一些数据。如果推送新值，我想闪烁或做一些特定DIV的动画。因此，当“可用性”更改时，动画仅执行ONCE。仅限于值已更改的DIV。

这是我的代码：

 //function the get data from database
 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);


         }
     });
 }

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

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

非常感谢你的帮助！

修改

输出是：

<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>

Answer 1

一个简单的解决方案是将变量保留在包含当前文本的函数之外，然后在每次调用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函数，例如this是一个帖子。

编辑：另一种选择是在成功时迭代所有<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的对应关系。如果不是这样（即，每个响应的平方数都会改变），则需要进一步的逻辑。

以下是第二个代码段的JSFiddle。我用数据填充了一些元素，然后创建一个包含旧数据和一些新数据的样本响应。该函数将成功确定需要插入哪些数据，并突出显示更新的元素。

它需要适应回调接收的特定数据（正如我在问题的评论中所指出的那样，你似乎不太可能从JSON响应中接收到一个数组数组），但我希望这表明如何实现目标。

Answer 2

好的，我想我现在明白你的问题了。

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 new"><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>';//added a class called new in the section here
                 text += '</section>';



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


     }
 });

      $(".square.new").each(function(){//wrote code to animate and remove the new class
             $(this).effect( "highlight", {color: 'red'}, 3000 );
             $(this).removeClass("new");
      });
 }

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

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

检查并将新值与旧的和基于此的动画进行比较

2 个答案: