Use a classe de elementos atual como um nome de matriz? - javascript, jquery, matrizes

É possível usar uma string de uma classe CSS de elementos como um nome de matriz?
Eu estou procurando uma maneira mais inteligente de armazenar animações padrão que podem crescer ao longo do tempo para incluir mais opções na matriz.

Exemplo

---

JavaScript (jQuery): -

var a1 = ["red", "pink"];
var a2 = ["green", "lime"];
var a3 = ["blue", "cyan"];

$("ul li").click(function() {
arr = $(this).attr("class");    // Does this need to be converted?
$("div#sprite").css("background", arr[0]);    // Is this kosher?
$("div#sprite p").css("color", arr[1]);
});

HTML: -

<div id="sprite"><p>Lorem ipsum...</p></div>

<ul>
<li class="a1">Array 1</li>
<li class="a1">Array 2</li>
<li class="a1">Array 3</li>
</ul>

Desde já, obrigado!

Respostas:

2 para resposta № 1

Você pode acessar um global (nível superior) variável pelo nome usando:

window[arr]

Então você está procurando window[arr][0]. Veja isso em ação aqui: http://jsbin.com/ofemo

No entanto, isso cria uma ligação estreita entre o seu JavaScript e o design. Eu costumo preferir usar .addClasse defina as cores usando CSS.

---

2 para resposta № 2

Você deve usar o plugin de metadados do jQuery. Ele permite que você armazene qualquer dado relacionado ao elemento na classe ou qualquer atributo data- *.

---

2 para resposta № 3

Como alternativa, tenha uma matriz como esta:

var colors = {
"a1":{
"background-color":"red",
"color":"pink"
},
"a2":{
"background-color":"green",
"color":"lime"
},
"a3":{
"background-color":"blue",
"color":"cyan"
}
}

e depois

$("div#sprite").css(colors[$(this).attr("class")]);

---