Question

尝试使用css（）方法更改背景图片...不确定执行此操作的最佳方法是什么。我试图复制，我用的第一个实例切换来改变切换图像，它的工作正常，它也将背景图像改为白天......

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

在第二个例子中我遇到了问题，我想切换回原来的night.jpg，但是没有工作..

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

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

Answer 1

在这种情况下，我会在.night上切换<body>课程。

你可以这样做......

$('.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中处理它会容易得多。

Answer 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会更简单，只需要在课堂上翻转课程

更改背景图片jQuery

2 个答案: