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 函数，例如，这是一篇出现的帖子。

编辑：另一种选择是遍历<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 响应中接收到数组数组），但我希望这能演示如何完成你的目标。

于 2013-07-19T13:22:53.743 回答
0

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

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();
于 2013-07-19T13:49:37.113 回答