Utiliser la classe d'éléments actuelle comme nom de tableau?

Question

Est-il possible d'utiliser une chaîne d'une classe CSS d'éléments comme nom de tableau?
Je suis à la recherche d'une façon plus intelligente de stocker les animations par défaut qui peuvent augmenter au fil du temps pour inclure plus d'options dans le tableau.

Exemple

---

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> 

Merci à Adva nce!

Answer 1

Vous pouvez accéder à un global (niveau supérieur) variables par nom en utilisant:

window[arr] 

Vous cherchez window[arr][0]. Voir en action ici: http://jsbin.com/ofemo

Cependant, cela crée un lien étroit entre votre JavaScript et le design. Je préfère généralement utiliser .addClass, et définir les couleurs en utilisant CSS.

Answer 2

Vous devez utiliser le plug-in métadonnées de jQuery. Il vous permet de stocker toutes les données relatives aux éléments en classe ou tout attribut data- *.

Answer 3

Sinon, avoir un tableau comme celui-ci:

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

puis

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