使用 jQuery addClass 更改背景图像

Change background-image using jQuery addClass

本文关键字：背景 图像 jQuery addClass 使用      更新时间：2023-09-26

是否可以使用 jQuery addClass 更改 css 背景？我正在使用以下代码，但它只停留在初始背景图像上。

.HTML

<div id="background">
</div>

jQuery

$(document).ready(function() {
                for (var x = 10; x > 0; x--) {
                    $"#background").addClass(background2).delay(2000);
                    $("#background").removeClass("background2");
                    $("#background").addClass("background3").delay(2000);
                    $("#background").removeClass("background3").delay(2000);
                };
            });;

.CSS

#background {
    width: 100%;
    height: 100%;
    font-size: 1.5em;
    background-image: url(backgroundimage1.JPG);
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.background1 {
    background-image: url(backgroundimage1.JPG);
}
.background2 {
    background-image: url(backgroundimage2.JPG);
}
.background3 {
    background-image: url(backgroundimage3.JPG);
}

你这里有两个问题。首先，您添加类并立即删除它们，因为delay对css()方法没有影响。要实现您的要求，您可以改用setInterval。其次，您需要增加backgroundX类的特异性，以便它们覆盖#background元素上的默认样式。试试这个：

var count = 0;
var classes = [ 'background1', 'background2', 'background3' ];
function updateBackground() {
    $('#background').removeClass(classes.join(' ')).addClass(classes[count % classes.length]);
    count++;
}
setInterval(updateBackground, 2000);

#background.background1 {
    background-image: url(backgroundimage1.JPG);
}
#background.background2 {
    background-image: url(backgroundimage2.JPG);
}
#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}

工作示例

请注意，该示例使用的是background-color但原理是相同的。

你需要编写正确的CSS规则。现在，他们的优先级不允许您查看更改。这样写

#background {
    background-image: url("backgroundimage1.JPG");
}
#background.background1 {
    background-image: url(backgroundimage1.JPG);
}
#background.background2 {
    background-image: url(backgroundimage2.JPG);
}
#background.background3 {
    height: 20%;
    background-image: url(backgroundimage3.JPG);
}

正如其他人所说，这是因为 ID 总是比类具有更高的特异性。

虽然你可以按照其他答案的建议去做（#background.background1等），但我建议只对jQuery目标使用ID，并避免在CSS文件中使用ID，因为它与使用类相比没有任何优势，而且有很多缺点（没有可重用性，特异性问题......了解为什么您应该避免在 CSS 文件中使用 ID

相关文章：