根据ids设置特定class的所有div的背景图片值

Question

我想编写一个脚本，自动设置我页面上所有 div 的背景图像 url，基于 classes .img-cover关于每个 'data-image' 属性的值。这样，每当我想设置背景图像时，我只需将正确的 'data-image' 值和 class 添加到 div，它就会自动拉取正确的图像。

更新

CSS 似乎不喜欢在 ID 中使用句点，所以我从所有 ID 中删除了“.jpg”并将其添加到脚本中，并为 ID 换出了一个数据属性。这是 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"));
    });

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

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 可能不是最适合的。当然它会起作用，但本着将属性用于特定目的的精神，数据属性会更合适。

Answer 2

由于命名约定 "id="flags_install.jpg" 我认为 .jpg 被解析为应用于元素的另一个 class。

尝试通过 id="flags_install" 接近它，然后 $(this).css("background-image", "url('/img/cover-imgs/" + id + ".jpg');");

工作：

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

根据ids设置特定class的所有div的背景图片值

Set the background-image values of all divs of a specific class based on ids

html

javascript

jquery

image

background-image