Question

我试图让以下工作：

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总是告诉我，我不能像 $ 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

不评估对象文字定义的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'

所以，直接回答你的问题，就像我说的那样，你应该这样做：

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

Answer 3

尝试：

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

Answer 4

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

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

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

在Jquery中设置CSS属性时如何使用变量？

4 个答案: