Question

我想知道为什么会这样：

var $blur = $("#blur"),
    blH = $blur.height();
    blHS = $blur.height() + 1;
    $blur.attr('data--' + blH + '-top', 'filter: blur(5px)');
    $blur.attr('data--' + blHS + '-top', 'filter: blur(0px)');

但这不是：

var $blur = $("#blur"),
    blH = $blur.height();
    blHS = $blur.height() + 1;
    $blur.attr({
        'data--' + blH + '-top': 'filter: blur(5px)',
        'data--' + blHS + '-top': 'filter: blur(0px)'
    });

Chrome说：

未捕获的SyntaxError：意外的标记+

和Firebug说：

SyntaxError：missing：属性id
之后

我不知道什么是正确的语法!!

我无法理解，我真的很感激任何帮助......

Answer 1

您有Javascript语法错误，计算属性名称尚不支持，但它将在ECMA6中

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

如果你真的想做第二种方式，你就是这样做的

var attrs = {};
attrs['data--' + blH + '-top'] = 'filter: blur(5px)';
attrs['data--' + blHS + '-top'] = 'filter: blur(0px)';

$blur.attr(attrs);

Answer 2

因为您不能将该语法用作Object属性。你可以使用这个：

var obj = {};
obj['data--' + blH + '-top'] = 'filter: blur(5px)';
obj['data--' + blHS + '-top'] = 'filter: blur(0)';
$('footer').attr(obj);

请注意，当您获得$blur.height()值时，您可以使用兑现值而不是再次调用它，我的意思是使用：

var $blur = $("#blur"),
    blH = $blur.height();
    blHS = blH + 1;

而不是：

var $blur = $("#blur"),
    blH = $blur.height();
    blHS = $blur.height() + 1;

在jQuery .attr（）多方法中计算attributeName？

2 个答案: