使用当前元素类作为数组名称？

Question

是否可以使用元素 CSS 类中的字符串作为数组名称？
我正在寻找一种更智能的方式来存储默认动画，这些动画可能会随着时间的推移而增长，以便在数组中包含更多选项。

示例

---

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>

提前致谢！

Answer 1

您可以使用以下方法按名称访问 全局（顶级） 变量：

window[arr]

所以你正在寻找window[arr][0]。在此处查看实际操作：http://jsbin.com/ofemo

但是，这会在您的 JavaScript 和设计之间建立紧密的联系。我通常更喜欢使用.addClass，并使用 CSS 定义颜色。

Answer 2

你应该使用 jQuery 的元数据插件。它允许您将任何与元素相关的数据存储在类或任何 data-* 属性中。

Answer 3

或者，有一个这样的数组：

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

然后

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