jQuery 是一个快速、小巧且功能丰富的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中,可以通过事件绑定来实现点击按钮替换图片的功能。
.click()
方法绑定点击事件。.attr()
或 .prop()
方法修改图片的 src
属性。在网页中,用户可以通过点击按钮来更换显示的图片,这在图片轮播、图片切换等场景中非常常见。
假设我们有一个按钮和一个图片元素:
<button id="changeImageBtn">更换图片</button>
<img id="myImage" src="image1.jpg" alt="图片">
我们可以使用以下 jQuery 代码来实现点击按钮更换图片的功能:
$(document).ready(function() {
$('#changeImageBtn').click(function() {
var currentSrc = $('#myImage').attr('src');
if (currentSrc === 'image1.jpg') {
$('#myImage').attr('src', 'image2.jpg');
} else {
$('#myImage').attr('src', 'image1.jpg');
}
});
});
原因:
解决方法:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
$('#changeImageBtn').click(function() {
// 代码逻辑
});
$(document).ready()
确保代码在 DOM 加载完成后执行:$(document).ready(function() {
$('#changeImageBtn').click(function() {
// 代码逻辑
});
});
通过以上步骤,可以确保点击按钮后图片能够正确更换。
没有搜到相关的文章