Jquery에서 CSS 속성을 설정할 때 변수를 사용하는 방법은 무엇입니까?

Question

는 내가 일을 다음 얻으려고 : 나는 단지 하나의 CSS 세터에 의해 얻을 기대했다

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
     ["margin-top", "margin-bottom"] : ["padding-top", "padding-bottom"]; 

$("#toBeSet").css({ 
    $marPad[0] : "100px", 
    $marPad[1] : "100px" 
    }) 

이 방법. 그러나 방화범은 항상 내가 $ marPad [0]과 같은 CSS 선택기를 만들 수 없다고 알려줍니다. 항상 이 누락되었습니다. 속성 ID 이후.

누군가 내가 뭘 잘못하고 있고 고정 CSS 선택기 대신 변수를 사용할 수 있다면 어떨까요?

도움 주셔서 감사합니다.

Answer 1

먼저 해당 객체를 생성 그것에 속성을 추가 할 필요가있다.

var obj = {}; 

obj[$marPad[0]] = '100px'; 
obj[$marPad[1]] = '100px'; 

$("#toBeSet").css(obj); 

그 첫번째 장소에있는 조건문의 일부 수 있도록하는 것입니다 아마도 더 나은 ...

var $marPad = $('#wrapper').attr('id') == "overthrow" ? 
     {marginTop:'100px', marginBottom: '100px'} : {paddingTop:'100px', paddingBottom:'100px'}; 

$("#toBeSet").css($marPad); 

Answer 2

시도 :

$("#toBeSet").css($marPad[0], "100px").css($marPad[1], "100px"); 

Answer 3

당신은 객체 리터럴의 이름과 같은 변수를 사용할 수 없습니다. 객체를 생성하고 여기에 속성을 추가

var o = {}; 
o[$marPad[0]] = "100px"; 
o[$marPad[1]] = "100px"; 

$("#toBeSet").css(o) 

Answer 4

객체 리터럴 정의의 key 부분은 평가되지 않습니다. 즉,이 같은 일을 할 수 없습니다

x = { 
    1 + 1: 'foo' 
}; 

을 항상 따옴표를 필요로하지 않더라도, 왼쪽은 문자열 식별자로 처리됩니다.

foo = 'bar'; 
x = { 
    foo: 'my value' 
} 
x.bar === undefined; 
x.foo === 'my value'; 

식을 평가하는 유일한 방법은 대괄호 표기법을 사용하는 것입니다 : 직접 질문에 대답 그래서

foo = 'bar'; 
x = {}; // an empty object 
x[foo] = 'my value'; // <-- foo is evaluated, returns the string value 'bar' 

x.bar === 'my value'; 
x.foo === undefined; 

// and to clarify: 
x['foo'] === undefined; 
x[foo] === 'my value' 

을, @am로 그 다음 변수는 평가되지 않도록 다음과 ATTR ('ID') == "전복"`는 항상 수익을 내가 ('# 래퍼')`$ 틀렸다하지만 경우

obj = {}; 
obj[$marPad[0]] = "100px"; 
obj[$marPad[1]] = "100px"; 
$('#toBeSet').css(obj);