JQuery와 .CSS()이 작동 프로그램

Question

여러 속성을 설정하지 않습니다 :

var property1 = "width"; 

$('.button1').on("click", function(){ 
    $('.greenbox').css(property1, "200px"); 
}); 

을하지만 그렇지 않은 :

var property1 = "width"; 
var property2 = "border-top"; 

$('.button2').on("click", function(){ 
    $('.greenbox').css({ 
     property1: "50px", 
     property2: "50px" 
    }); 
}); 

왜? 그리고 가장 쉽고 빠르며 가장 매끄러운 무엇입니까. 가장 알려지지 않은 여러 개의 (알려지지 않은) 속성을 설정하는 가장 중요한 방법? 값이 인 것을 알고 있습니다. 속성을 모르겠습니다. :)

http://jsfiddle.net/4KwXa/

자바 스크립트에서

Answer 1

.. 대신 문자열 '속성 1'과 'property2'의 뜻을 전달되지 않습니다 property1 및 property2의 값을 의미 만 문자열로 키를 정의 할 수있는 객체 .. 구축 전달 ..

는이를 극복 고급의 객체를 만들려면, 다음 통과 그것은 전체 : (working jsFiddle)

var cssObj = {}; 
cssObj[property1] = '50px'; 
cssObj[property2] = '50px'; 
$('.greenbox').css(cssObj); 

편집 : 나는이 문서에서 찾을 수없는

저를 백업 할 수 있지만,이 사건은 이것이다 :

다음과 같은 표기법을 사용하는 경우 : {key1:value1, key2:value2} 자바 스크립트는 이름과 키를 구문 분석하고, 거기에도 불구을 javascript가 정의 된 같은 이름의 변수는 값을 전달하지 않고 이름 만 전달합니다 (이것은 빌드 된 방식입니다). 키를 변수로 전달할 수 없습니다.

cssObj[peroperty1]을 사용하는 것은 기본적으로 객체를 연관 배열로 취급하므로 작동하며 변수로 키를 할당하는 것이 허용됩니다.

Answer 2

리터럴 값 "property1"을 키로 사용하여 개체를 만듭니다. 시도중인 접근 방식을 사용하려면 다음을 시도하십시오.

var property1 = "width"; 
var property2 = "border-top"; 

var styles = {}; 
styles[property1] = "50px"; 
styles[property2] = "50px"; 

$('.button2').on("click", function(){ 
    $('.greenbox').css(styles); 
}); 

Answer 3

문제는 사용자가 정확하게 속성 이름을 지정하지 않는다는 것입니다. property1: '50px'라고 말하면 실제로 "property1"이라는 속성을 50px로 설정합니다. 당신의 property1 대신 그것은 자바 스크립트 객체를 해석하는 단지 방법 등 property1 및 property2의 실제 값의 property2 전달 된 객체를 설정하고 있기 때문에 작동하지 않습니다

http://jsfiddle.net/4KwXa/1/

Answer 4

이유입니다.

이 문제에 대한 해결책은 배열을 사용하는 것입니다.

var properties = ['width', 'border-top']; 

$('.button2').on('click', function() { 
    for(var i = 0; i < properties.length; i++) 
     $('.greenbox').css(properties[i], '50px'); 
}); 

Answer 5

구문이 잘못되었습니다. 코드가 올바르게 작동하게하려면

cssObj.css("property1", "50px").css("property2", "50px") 

위의 답변 중 일부는 더 우아하게하려는 것입니다.

Answer 6

key의 키 정의는 object의 'values'입니다. 키 자체는 변수가 될 수 없습니다.이 같은 것을 할 필요가

var obj[variable]='value'; 

내가 여기에 한 일을 할 ... http://jsfiddle.net/techsin/4KwXa/4/

:

var props={}; 
    props[property1]= "50px"; 
    props[property2]= "50px";