Javascript 如何使用jQuery更改背景图像

我正在使用jQuery更改页面的背景图像。目前，我正在使用两个不同的按钮将图像从图像A切换到图像B。默认情况下显示图像A

我想实现的是用一个按钮来更改图像，单击该按钮时会更改名称

因此，对于图像A，按钮应该只显示放大，单击时，图像B显示在背景中，但按钮将显示缩小

如果我没有解释清楚，我道歉

---

如果在CSS中设置类

.image1{background image:url（“此处”）}

和

.image2{background image:url（“此处”）}

然后将一个应用于背景元素，您可以像这样在两个元素之间切换

$('#theButton').click(function(){
    $('#background').toggleClass('image1').toggleClass('image2');
});

另外，您是否知道可以将所有这些

.css

函数放在一行中

---

如果您这样编码，那么您就错过了jQuery的要点。只有一个id为A更改的按钮

jQuery（函数（）{
jQuery（“#aChange”）。单击（函数（）{
var text=jQuery（'#aChange'）.val（）；
如果（文本==“放大”）{
jQuery（“#test”）.css（“背景图像”，“url（image-B.gif）”）；
jQuery（“测试”）.css（“背景位置”，“50px-100px”）；
jQuery（“测试”）.css（“背景重复”，“不重复”）；
jQuery（“测试”）.css（“背景大小”、“封面”）；
} 
否则{
jQuery（“#test”）.css（“背景图像”，“url（image-A.gif）”）；
jQuery（“#test”）.css（“背景位置”，“50px 0”）；
jQuery（“测试”）.css（“背景重复”，“不重复”）；
jQuery（“测试”）.css（“背景大小”、“封面”）；
}
jQuery（“#aChange”）.val（text==“放大”？“缩小”：“放大”）；
});
});


如果我理解得好，这可能会对你有所帮助。查看它：
您可以用最少的jQuery和一点CSS来实现这一点。见下文


$（“按钮”）。在（“单击”，函数（）{
$（“body”）.toggleClass（“img2”）；
$（this）.text（函数（i，text）{
返回text.indexOf（“In”）！=-1&&“缩小”| |“放大”；
});
});
正文{
宽度：100%；
身高：100%；
背景图像：url（“http://news.bbcimg.co.uk/media/images/76132000/jpg/_76132132_z3551404-blue_morpho_butterfly-spl.jpg");
背景位置：50px0；
背景重复：无重复；
背景尺寸：封面；
}
body.img2{
背景图像：url（“http://wallerz.net/wp-content/uploads/2014/10/4049_butterfly.jpg")
}

放大
你会不会最好创建两个包含所有CSS的类，然后使用jquery添加和删除该类？你为什么要随机化起始图像？如果不是，您就不需要这段代码：“images[Math.floor（Math.random（）*images.length）]；”谢谢您的帮助，我对jQuery一点也不了解，我的示例是从其他示例中重新编译而来的。它工作得很好，使用两个不同的按钮交换图像，但正如所有开发人员所说，没有一种正确的方法可以实现您想要的。我想这取决于使用你觉得舒服的东西和最有效的东西。谢谢你的帮助。所有的解决方案都能很好地工作。除了执行jQuery（“#test”）.css（）4次之外，您还可以使用.css（{“style1”：“value-style-1”、“style-2”：“value-style-2”，等等）}@Mortaza：是的，这将是一种优化的方式。但我只是回答这个问题。
$('#theButton').click(function(){
    $('#background').toggleClass('image1').toggleClass('image2');
});

$('.this').css({
    'color':'green',
    'border':'1px solid black',
    'position','absolute'
});

$('.Zoom').click(function(){
    var $this = $(this);
    $this.toggleClass('Zoom');
    if($this.hasClass('Zoom')){
        $this.text('Zoom'); 
        $("html").css("background-color","yellow");
    } else {
        $this.text('Zoom Out');
        $("html").css("background-color","green");
    }
});