在jQuery .attr（）中計算attributeName的多重方法？

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)' 
    }); 

鉻說：

Uncaught SyntaxError: Unexpected token +

和螢火蟲說：

SyntaxError: missing : after property 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;