更改背景图像 jQuery

Change background images jQuery

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

尝试使用 css（） 方法更改背景图像...不确定最好的方法是什么。我尝试复制，我使用切换的第一个实例来更改开关图像，并且它工作正常，它还将背景图像更改为天...

$('.switch').on('click', function(){
    $('.night, .day').toggle();
    $('body').css('background','url(img/day.jpg)');
}),

第二个实例是我遇到了问题，我想切换回原来的夜晚.jpg，但不起作用。

$('.switch').on('click', function(){
    $('body').css('background','url(img/night.jpg)');
})

这是一个有点工作的垃圾箱...JSBIN

在这种情况下，

我会在<body>上切换.night类。

你可以这样做...

$('.switch').on('click', function () {
  $('body').toggleClass('night');
});

然后在你的CSS中有类似的东西：

body {
  background-image: url('img/day.jpg');
}
body.night {
  background-image: url('img/night.jpg');
}

除非 CSS 属性的值是动态的，否则直接在 CSS 中处理它要容易得多。

组合两个单击处理程序。如果您使用其中的 2 个，它们都将被触发

跟踪状态的一种简单方法是在交换机上切换一个类

$('.switch').on('click', function(){
    var isOn = $(this).hasClass('on');
    var img = isOn ?'img/day.jpg' : 'img/night.jpg';
    $('.night, .day').toggle(isOn);
    $('body').css('background','url('+img+')');
     $(this).toggleClass('on');
});

话虽如此，使用 css 会简单得多，只需要在 body 上切换类

相关文章：