raphael - Raphael.js - 如何以编程方式生成元素名称？

Question

我有一些通过 php 硬编码到页面中的 Raphael 矩形元素，它会根据调用页面时需要的数量动态生成它们。

我要做的是编写一个 javascript 函数，该函数将采用 id 号并更改相关 Raphael 函数的背景颜色。

我知道下面的例子不起作用，但这是我想要实现的。

var rectangle_1 = paper.rect(100, 10, 200, 75);
var rectangle_2 = paper.rect(400, 10, 200, 75);
var rectangle_3 = paper.rect(700, 10, 200, 75);

change_color('1');

function change_color(id) {
  variable_name = 'rectangle_' + id;
  variable_name.attr({fill: 'blue', stroke: 'black', 'stroke-width': 3});
}

显然这不起作用，任何关于如何动态生成元素名称的帮助和建议将不胜感激，

问候，

斯特

Answer 1

只需使用数组或对象来存储矩形而不是命名变量。

var rectangles = [];
rectangles[0] = paper.rect(100, 10, 200, 75);
rectangles[1] = paper.rect(400, 10, 200, 75);
rectangles[2] = paper.rect(700, 10, 200, 75);

change_color(1);

function change_color(id) {
  rectangles[id].attr({fill: 'blue', stroke: 'black', 'stroke-width': 3});
}

如果您需要字符串 ID，可以将其作为对象进行：

var rectangles = {};
rectangles['one'] = ...