javascript - 多个元素一次使用相同的点击功能。如何？

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