Aktuelle Elementklasse als Array-Name verwenden?

Question

Ist es möglich, eine Zeichenkette aus einer CSS-Klasse eines Elements als Array-Name zu verwenden?
Ich bin auf der Suche nach einer intelligenteren Art und Weise der Speicherung von Standard-Animationen, die im Laufe der Zeit wachsen kann, um mehr Optionen in das Array aufzunehmen.

Beispiel

---

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>

Vielen Dank im Voraus!