현재 요소 클래스를 배열 이름으로 사용 하시겠습니까?

Question

요소 CSS 클래스의 문자열을 배열 이름으로 사용할 수 있습니까?
배열에서 더 많은 옵션을 포함하도록 시간이 지남에 따라 커질 수있는 기본 애니메이션을 더 똑똑하게 저장하는 방법을 찾고 있습니다.

예

---

자바 스크립트 (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 : - ADVA의

<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> 

감사합니다 nce!

Answer 1

당신이 사용하는 이름으로 글로벌 (최상위) 변수에 액세스 할 수 있습니다 그래서 당신은 window[arr][0] 찾고있는

window[arr] 

. 여기에 실제 적용됩니다. 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')]);