0

所以我对 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。

目前,我对导致这种行为的原因感到困惑。我在这里做错了什么?

4

1 回答 1

2

这就是 Raphael 的 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 将为 null 并且 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();
于 2012-07-30T18:22:48.627 回答