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

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函数可以帮助你做到这一点; circle和text：

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

Answer 2

你不需要的对象存储在数组中，如果你只是想继续在他们身边，你已经有两个变量引用它们。定义函数一次，然后将其分配给使用它的任何元素：

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

在元素只是循环和处理程序附加到他们每个人。不需要任何库。

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; 
} 

Answer 4

如果你想与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 
       });