jQuery-動態更改CSS

Question

我想動態更改特定元素的CSS。 以下硬編碼的jQuery語句有效：

$('.people div[data-face="1"] i').css('background-image', 'url(http://localhost:58888/_pictures/picture_000.jpg)');

但是，我需要將“ 1”作為變量（“ dataNum”），並且實際的url必須是稱為“ URL”的變量。

我一直在嘗試各種轉義字符，但不能使它正常工作。 這是我的最新消息：

 $("\'.people div[data-face=\" " + dataNum + '\"] i\').css(\'background-image\', \'url(' + URL + ')\' ');

我想念什么？ 謝謝。

Answer 1

jQuery選擇器不是魔術。 它們只是普通的字符串。
您不需要逃避任何事情。

相反，您只需要普通的字符串連接。

Answer 2

您可以使用字符串連接來做到這一點，例如：

$('.people div[data-face="' + dataNum + '"] i').css('background-image', 'url('+URL+')');

Answer 3

嘗試

$('.people div[data-face="'+dataNum+'"] i').css('background-image', 'url(\''+URL+'\')');

Answer 4

它只是dataNum的字符串數學（連接），並且是url變量的直接替代：

$('.people div[data-face="' + dataNum + '"] i').css('background-image', url);

或者如果您想更詳細地查看字符串數學：

var selector = '.people div[data-face="';
selector += dataNum;
selector += '"] i';
$(selector).css('background-image', url);

Answer 5

$('.people div[data-face="' + dataNum + "'"] i').css('background-image', 'url(' + URL + ')');

Answer 6

您實際上並不需要轉義，以下代碼應該可以工作：

$('.people div[data-face="'+dataNum+'"] i').css('background-image', 'url('+URL+')');