0

我有两个问题。

我正在动态创建放置在地图上的圆圈。每个圆圈在鼠标悬停时动画较大，然后在鼠标悬停时动画较小。圆圈在被点击时需要保持大。我通过在单击处理程序中使用 unmouseout() 删除 mouseout 事件来完成这一部分。但是，这就是我被卡住的地方，当我单击一个新圆圈时，我需要先前选择的圆圈（没有它的 mouseout 事件的圆圈）以动画回其原始大小。我想我可以通过将它的 mouseout 事件放回它来实现这一点？但一直无法让它发挥作用。任何想法我怎么能做到这一点？

此外，根据从 xml 读取的数据项的类型和数量，圆圈会动态生成并放置在地图上。我想删除所有这些，然后在选择 UI 时用新的集合替换。我的问题是如何在用新元素替换它们之前删除所有元素。

我包括我的脚本，它执行第一个问题中描述的内容。它不是从 .xml 中读取，而是从用于测试目的的数组中读取。我已经用 addClass removeClass 和 css 成功完成了这个。在这里尝试过，但不行。任何帮助将不胜感激！谢谢！

var arr = [[556,227,"this", "Is text that is to be the abstract"],[500,60,"that", "Is text that I hope is here"],[180,80,"another thing", "Even more text"]];
var currRect;
var currTitleTxt;
var currTeaseTxt;



 function doMe() {  
     var paper = new Raphael(document.getElementById('canvas_container'), 696, 348); 
    for (var i = 0; i < 5; i++) {
         paper.circle(arr[i][0], arr[i][1], 6)
         .attr({fill: '#fff', 'fill-opacity': 0.5})
         .data("i", [arr[i][0],arr[i][1], arr[i][2], arr[i][3]])
         .click(function () {
    this.unmouseout();
     })

.mouseover(function () {
        this.animate({ r:8 }, 250 );
    this.animate({"fill-opacity":1}, 150 )


     })
.mouseout(function () {
        this.animate({ r:6 }, 250 );
    this.animate({"fill-opacity":0.5}, 150 )

     });
}
}
4

1 回答 1

0

通常你在stackoverflow上每个问题只问一个问题，但我会回答他们两个，因为你是新手。

问题一：

维护单击的圆圈的一种方法是在其上存储一个值，以表明它已被选中，raphael 使用数据调用可以轻松添加值。

element.data('someKey', 'someValue');

这是我对您的代码的更新以显示使用中的示例，我添加了两个函数来处理鼠标悬停和鼠标移出状态，这是为了避免重复代码。此外，我更改了您的 for 循环，因为它设置为 5，但您的数组中只有 3 个项目。现在，无论您在阵列中有多少，它都可以工作。

在这里演示：http: //jsfiddle.net/Cyyxk/5/

var arr = [
    [50, 50, "this", "Is text that is to be the abstract"],
    [100, 50, "that", "Is text that I hope is here"],
    [150, 50, "another thing", "Even more text"]
];
var currRect;
var currTitleTxt;
var currTeaseTxt;
var prevItem;

doMe();

function doMe() {
    var paper = new Raphael(document.getElementById('canvas_container'), 696, 348);
    for (var i = 0; i < arr.length; i++) {
        paper.circle(arr[i][0], arr[i][1], 6).attr({
            fill: '#fff',
            'fill-opacity': 0.5
        }).data("i", [arr[i][0], arr[i][1], arr[i][2], arr[i][3]]).click(function () {
            this.unmouseout();
        }).click(function () {
            if (this.data('selected') != 'true') {
                if (prevItem != null) {
                    prevItem.data('selected', '');
                    handleOutState(prevItem);
                }
                prevItem = this.data('selected', 'true');
            }

        }).mouseover(function () {
            handleOverState(this);
        }).mouseout(function () {
            if (this.data('selected') != 'true') handleOutState(this);
        });
    }

    function handleOverState(el) {
        el.animate({
            r: 8
        }, 250).animate({
            "fill-opacity": 1
        }, 150);
    }

    function handleOutState(el) {
        el.animate({
            r: 6
        }, 250).animate({
            "fill-opacity": 0.5
        }, 150);
    }

}

问题2：

要从论文中删除所有元素：

paper.clear();

显然，请确保您可以paper从调用它的函数中获取变量，否则它将不起作用。

于 2013-06-08T07:04:38.343 回答