有4个div 分别存放4张照片 分别点击div改变照片 用jquery写
时间: 2024-03-24 08:40:44 浏览: 12
可以使用以下代码实现:
HTML代码:
```html
<div class="photo" id="photo1"><img src="photo1.jpg"></div>
<div class="photo" id="photo2"><img src="photo2.jpg"></div>
<div class="photo" id="photo3"><img src="photo3.jpg"></div>
<div class="photo" id="photo4"><img src="photo4.jpg"></div>
```
jQuery代码:
```javascript
$(document).ready(function() {
$(".photo").click(function() {
var photo = $(this).find("img");
var src = photo.attr("src");
if (src == "photo1.jpg") {
photo.attr("src", "photo2.jpg");
} else if (src == "photo2.jpg") {
photo.attr("src", "photo3.jpg");
} else if (src == "photo3.jpg") {
photo.attr("src", "photo4.jpg");
} else {
photo.attr("src", "photo1.jpg");
}
});
});
```
以上代码中,我们首先使用`$(document).ready()`方法来确保文档已经加载完毕,然后使用`.photo`选择器来选中所有具有`photo`类的元素,使用`.click()`方法来绑定一个点击事件。在点击事件中,我们首先找到被点击的div元素的子元素img,然后获取它的src属性,并根据当前的src来判断应该切换到哪一张照片。最后,我们使用`.attr()`方法来改变img元素的src属性,从而改变显示的照片。