未应用来自数据属性的 css 规则

Question

我卡住了。如果您否决了这个问题，请解释一下，以便我理解为什么以及如何改进我的问题。
我有一个数据属性需要 "referenced" by jquery。 jquery 引用此数据属性以将 "background" 和 "url" 设置为 css class。我不确定如何或在何处放置引号，以便正确放置 url() 内的引号。（我认为这是问题所在）

<li class="wings-data" data-country-code="se" 
 data-background-style="'background','url( "images/se.jpg")'">

var backgroundStyle = $(".wings-data").data("background-style");

$("#article").css(backgroundStyle);

Answer 1

<li class="wings-data" data-country-code="se"
 data-background-style="'background','url( \"images/se.jpg\")'"> ABC</li>

和

var backgroundStyle = $(".wings-data").prop("data-background-style");
$("#article").css(backgroundStyle);

Answer 2

你的代码有问题

var backgroundStyle = $(".wings-data").data("background-style");

$("#article").css(backgroundStyle);

而不是这个尝试代码

li class="wings-data" data-country-code="se"
 data-background-style="'background','url( \"images/se.jpg\")'"

var backgroundStyle = $(".wings-data").attr("data-background-style");

$("#article").css(backgroundStyle);

Answer 3

获取数据后，background-style变为backgroundStyle； jQuery 将自动去除连字符和驼峰式连字符属性。

var backgroundStyle = $(".wings-data").data("backgroundStyle");

另外，用反斜杠转义引号：

<li class="wings-data" data-country-code="se"
 data-background-style="'background','url( \"images/se.jpg\")'"></li>

Answer 4

完全消除引号以获得更具可读性的代码。

HTML :

<li class="wings-data" data-country-code="se"
 data-background-style="background,url(images/se.jpg)"> ABC</li>

JS :

var backgroundStyle = $(".wings-data").data("backgroundStyle").split(',');
$("#article").css(backgroundStyle[0],backgroundStyle[1]);

参见 JsFiddle 解决方案。

未应用来自数据属性的 css 规则

The css rule from data attribute is not getting applied

html

javascript

css

jquery

escaping