Question

我正在使用Raphael JS，但我认为这是纯JavaScript或jQuery问题。

我有两个元素，一个文本和一个圆圈（椭圆），我使用一个变量来存储它们供以后使用。

所以，我在想，不是一遍又一遍地重复自己，而是会创建一个数组并在点击时使用它。

但它不起作用。如何解决这个问题并为我的数组中的每个变量（对象）分配onclick？

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");

var myArray = [circle, text];
myArray.click(function () {
    window.location = "http://somewebsite.com";
});

Answer 1

jQuery $ .each函数可以帮助你解决这个问题;

$.each(myArray, function(i, v) {
    v.click(function() {
        window.location = "http://somewebsite.com";
    });
});

Answer 2

如果您只想保留它们，则无需将对象存储在数组中，您已经使用两个变量引用它们：circle和text。定义函数一次，然后将其分配给使用它的任何元素：

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");

function clickFunction()
{
    window.location = "http://somewebsite.com";
}

circle.addEventListener("click", clickFunction);
text.addEventListener("click", clickFunction);

或者，使用jQuery：

circle.click(clickFunction);
text.click(clickFunction);

Answer 3

如果你想用raphaelJS做...

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");
var click_set = paper.set();
click_set.push(circle);
click_set.push(text);

click_set.click(function(){
 // do what you want ... this function will automatically be bound to all the elements that //you push in the set
               });

Answer 4

只需遍历元素并将处理程序附加到每个元素。不需要任何库。

var circle = paper.ellipse(350, 320, 95, 90);
var text = paper.text(350, 320, "My text");

var myArray = [circle, text];
var handler = function () {
    window.location = "http://somewebsite.com";
};

for (var i = 0; i < myArray.length; i++) {
    myArray[i].onclick = handler;
}

多个元素一次使用相同的单击功能。怎么样？

4 个答案: