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

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 定义颜色。