jquery怎么实现点击一个元素更换背景图片，连续点击永远在2张图片之间更换

Question

如题所述

Answer 1

实现的方法和操作步骤如下：

1、首先，打开html编辑器，创建一个新的html文件，例如index.html，然后引入jquery，如下图所示。

2、其次，完成上述步骤后，在index.html的<script>标记中，输入下图红框中的jquery代码，如下图所示。

3、接着，完成上述步骤后，浏览器运行index.html页面，显示出了其中1张背景图片，如下图所示。

4、最后，完成上述步骤后，再次单击“点击更换”按钮，这时背景图像被更改为另一幅，如下图所示。这样，问题就解决了。

Answer 2

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的<script>标签，输入jquery代码：。

var no = 0;

var arr = ['small2.png', 'small3.png'];

function fun() {

no ^= 1;

$('body').css('background-image', 'url(' + arr[no] + ')');

}

3、浏览器运行index.html页面，此时显示出了其中1张背景图片。

4、再点击“点击更换”按钮，此时背景图片又被更换到另一张。

本回答被网友采纳

Answer 3

可以采用如下思路：分别将两种背景图片设为两个类，然后使用toggleClass()方法切换类：

$(selector).toggleClass('class_a').toggleClass('class_b');

示例如下：

创建Html代码：一个简单的div用于显示背景图片

<div class="test"></div>

设置css样式：分别为两个背景设计一个类

div.test{width:264px;height:152px;margin:50px;border:4px dashed #ccc;}
.bg1{background:url('bg1.png');}
.bg2{background:url('bg2.png');}

编写jquery代码：点击切换类实现背景的变换

$(function(){
$("div.test").addClass('bg1'); // 初始化时添加背景1
$("div.test").click(function() {
$(this).toggleClass('bg1').toggleClass('bg2');
});
})

观察效果

初始状态



一次点击



再次点击

Answer 4

$("#button").toggle(function(){$("body").css("background","img1URL")},function(){$("body").css("background","img2URL")})追问

我可以在加强一下，把那个更改图片的换成更改样式 点击元素 class值一直在变化

toggle 这个不是点击事件吧

追答

$("#change").toggle(function () { $("body").removeClass("body2").addClass("body1"); }, function () { $("body").removeClass("body1").addClass("body2"); })

toggle是一个循环事件

追问

你那写法是不是先删除样式，在添加样式

attr("class","body1"); 这种写法应该也可以吧 不知道是不是attr这个单词

本回答被提问者采纳