Мне интересно, почему это работает:

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 говорит:

Uncaught SyntaxError: Неожиданный токен +

И Firebug говорит:

Ошибка синтаксиса: отсутствует: после идентификатора свойства

Я не знаю, какой правильный синтаксис!!

Я не могу понять это, и я очень ценю любую помощь ..

3
ErshadQ 13 Июл 2015 в 04:55

2 ответа

У вас была синтаксическая ошибка Javascript, имя вычисляемого свойства еще не поддерживается, но будет в ECMA6

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

Если вы действительно хотите сделать 2-й способ, вот как вы это делаете

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

$blur.attr(attrs);
2
Neverever 13 Июл 2015 в 05:08
Спасибо! это было действительно полезно
 – 
ErshadQ
13 Июл 2015 в 11:25

Потому что вы не можете использовать этот синтаксис в качестве свойства объекта. Вы можете использовать этот:

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;
1
Mehdi Dehghani 13 Июл 2015 в 05:13