javascript - 根据 ids 设置特定类的所有 div 的背景图像值

Question

我想编写一个脚本，根据每个“data-image”属性的值，使用 .img-cover 类自动设置页面上所有 div 的背景图像 url。这样，每当我想设置背景图像时，我只需将正确的“数据图像”值和类添加到 div 中，它就会自动提取正确的图像。

更新

CSS 似乎不喜欢在 ids 中包含句点，因此我从所有 ID 中删除了“.jpg”并将其添加到脚本中，并替换了 ids 的数据属性。这是 HTML:

<div class="img-cover" data-image="flags_install"></div> 

新的jquery:

$(".img-cover").each(function() {
        var data = $(this).attr('data-image');
        console.log(data);
        $(this).css("background-image", "url('/img/cover-imgs/" + data + ".jpg');");
        console.log($(this).css("background-image"));
    });

我还添加了控制台日志，并从第一个日志中获取数据值，但它仍然只是为背景图像返回“无”。还有其他想法吗？

Answer 1

$(this).css("background-image", "url('/img/cover-imgs/'" + id + ");");
//                                                    ^ there's your problem

该撇号导致

/img/cover-imgs/'some-img.jpg

应该是

$(this).css("background-image", "url('/img/cover-imgs/" + id + "');");

顺便说一句，ID 可能不是最适合这种情况的。当然它会起作用，但本着属性用于特定目的的精神，数据属性会更合适。