jquery点击来回切换图片

基础概念

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。通过 jQuery，可以轻松实现网页上的各种动态效果，包括图片的切换。

类型与应用场景

类型：通常用于前端页面的交互效果。
应用场景：网站导航、轮播图、动态表单验证、实时搜索等。

示例代码

以下是一个使用 jQuery 实现点击切换图片的简单示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Toggle with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #imageContainer img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>

<div id="imageContainer">
    <img id="toggleImage" src="image1.jpg" alt="Image 1">
</div>
<button id="toggleButton">Toggle Image</button>

<script>
$(document).ready(function(){
    let isImage1 = true;
    $('#toggleButton').click(function(){
        if(isImage1){
            $('#toggleImage').attr('src', 'image2.jpg');
        } else {
            $('#toggleImage').attr('src', 'image1.jpg');
        }
        isImage1 = !isImage1;
    });
});
</script>

</body>
</html>