1

これは機能します：

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/

4

6 に答える 6

3

Javascript では、オブジェクトを作成するときに、キーを文字列として定義することしかできません。つまり、 と の値は渡さproperty1れproperty2ません。代わりに、文字列 'property1' と 'property2' が渡されます。

これを克服するには、高度なオブジェクトを作成してから、全体を渡します: ( working jsFiddle )

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

編集：

ドキュメントでバックアップを見つけることができませんでしたが、ケースは次のとおりです。

次の表記法を使用する場合: {key1:value1, key2:value2}javascript はキーを名前として解析し、定義された同じ名前の変数があっても、javascript は値を渡さず、名前のみを渡します - これが構築方法です - キーを変数として渡すことはできません.

cssObj[peroperty1]基本的にオブジェクトを連想配列として扱っているため、使用は機能します。この方法では、キーを変数として割り当てることができます。

于 2013-08-08T00:58:08.987 に答える
1

機能しない理由は、渡されたオブジェクトを設定しているためですproperty1andproperty2の実際の値の代わりにproperty1andproperty2など。これは、JavaScriptがオブジェクトを解釈する方法です。

この問題の解決策は、配列を使用することです。

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

$('.button2').on('click', function() {
    for(var i = 0; i < properties.length; i++)
        $('.greenbox').css(properties[i], '50px');
});
于 2013-08-08T00:59:24.247 に答える
0

リテラル値「property1」をキーとしてオブジェクトを作成しています。試みているアプローチを取りたい場合は、これを試してください：

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

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

$('.button2').on("click", function(){
    $('.greenbox').css(styles);
});
于 2013-08-08T00:58:31.823 に答える
0

問題は、プロパティ名を正しく指定していないことです。と言うときproperty1: '50px'、実際には「property1」というプロパティを 50px に設定しています。

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

于 2013-08-08T00:58:40.363 に答える
0

オブジェクトの key:'values' のキーを定義している方法で。キー自体を変数にすることはできません。

そのためには、次の表記が必要です。

var obj[variable]='value';

私がここでやったことをしてください... http://jsfiddle.net/techsin/4KwXa/4/

次のようなことをする必要があります：

var props={};
    props[property1]= "50px";
    props[property2]= "50px";
于 2013-08-08T01:24:23.773 に答える