Raphael toFront（）奇怪

Question

所以我有一個奇怪的問題，raphael.js庫，這對我來說沒有意義。我有一張代表位置的點的世界地圖。許多點相互重疊。當我想單獨列出不同的位置時，我想將元素刷新到前景。

考慮下面的代碼...

$("#peerIdSelector").change(function() { 
    var peerSelected = $(this).val(); 
    var counter = 0; 
    var antiCounter = 0; 
    paper.forEach(function (el) { 
     var peer = el.data("peer"); 
     if (peer === peerSelected) { 
      //el.toFront(); 
      el.attr("fill", "#ffff00"); 
      counter++; 
     } else { 
      el.attr("fill", "#00ffff"); 
      antiCounter++; 
     } 
    }); 
    alert(counter + " peers updated for " + peerSelected + "\n" + antiCounter + " peers not updated") 
}); 

當el.toFront()被註釋掉，代碼工作正常，求解基於if語句的正確數量的元素。但是，如果我包含el.toFront()指令，那麼只有遇到的第一個if (peer === peerSelected)將顯示爲true，此後每隔一個顯示爲false。

目前我很難理解會導致這種行爲的原因。我在這裏做錯了什麼？

Answer 1

這是拉斐爾的forEach功能的作用：

paperproto.forEach = function (callback, thisArg) { 
    var bot = this.bottom; 
    while (bot) { 
     if (callback.call(thisArg, bot) === false) { 
      return this; 
     } 
     bot = bot.next; 
    } 
    return this; 
}; 

在當前項目中調用toFront將導致元件是在問題被移到列表的末尾，所以bot.next將是無效和while循環將比您預期的更早踢出。

我建議這是一個解決方案：

var frontSet = paper.set(); 
paper.forEach(function (el) { 
    var peer = el.data("peer"); 
    if (peer === peerSelected) { 
     frontSet.push(el); 
     el.attr("fill", "#ffff00"); 
     counter++; 
    } else { 
     el.attr("fill", "#00ffff"); 
     antiCounter++; 
    } 
}); 
frontSet.toFront();