Question

是否可以使用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);
}

Answer 1

这里有两个问题。首先，您要添加类并立即将其删除，因为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);
}

Working example

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

Answer 2

您需要编写适当的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);
}

Answer 3

正如其他人所说的那样，因为ID总是有higher specificity than classes。

虽然您可以执行其他答案所建议的内容（＃background.background1等），但我建议仅将该ID用于jQuery定位并避免在CSS文件中使用ID，因为它不会使用类有任何优势，它有许多缺点（没有可重用性，特异性问题......）。见why you should avoid IDs in yous CSS files

使用jQuery addClass更改背景图像

3 个答案: