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

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

Answer 2

您可以使用以下命令访问全局（顶级）变量：

window[arr]

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

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

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')]);

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

3 个答案: