0

我正在尝试使以下工作：

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

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

通过这种方式，我希望只使用一个 css setter。然而，Firebug 总是告诉我我不能制作像这样的 CSS 选择器$marPad[0]。它总是返回missing : 在属性 id 之后。

有人能告诉我我做错了什么吗？是否也可以使用变量而不是固定的 CSS 选择器？

感谢帮助！

4

4 回答 4

5

您需要首先创建对象，然后向其添加属性。

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);
于 2012-04-11T21:45:46.387 回答
2

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 not 我所说的那样，您应该执行以下操作：

obj = {};
obj[$marPad[0]] = "100px"; 
obj[$marPad[1]] = "100px";
$('#toBeSet').css(obj);
于 2012-04-11T21:52:32.380 回答
1

尝试：

$("#toBeSet").css($marPad[0], "100px").css($marPad[1], "100px");
于 2012-04-11T21:45:29.210 回答
1

您不能将变量用作对象文字中的名称。创建对象并向其添加属性：

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

$("#toBeSet").css(o)
于 2012-04-11T21:46:41.960 回答