Question

我有两个问题。

我正在动态创建放置在地图上的圆圈。每个圆圈在鼠标悬停时动画效果更大，然后在mouseout上动画更小。点击时，圆圈需要保持较大。我通过在单击处理程序中使用unmouseout（）删除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 )

     });
}
}

Answer 1

通常你只会在stackoverflow上询问每个问题的一个问题，但我会在你是新的时候回答它们。

问题1：

维护点击圈的一种方法是在其上存储一个值，以显示它已被选中，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变量，否则它将无效。

Raphael js删除一个对象上的事件，然后在选择其他对象时替换它

1 个答案: