jquery 图片显示隐藏

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，图片显示和隐藏是通过修改元素的 CSS 属性 display 来实现的。

类型

显示图片：使用 .show() 方法或设置 display 属性为 block 或 inline。
隐藏图片：使用 .hide() 方法或设置 display 属性为 none。

应用场景

图片轮播：在图片轮播组件中，通过显示和隐藏不同的图片来实现动画效果。
图片懒加载：在页面加载时，先隐藏图片，当用户滚动到图片位置时再显示。
响应式设计：根据不同的屏幕尺寸，显示或隐藏某些图片。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片显示隐藏示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="image1" src="image1.jpg" alt="Image 1">
    <img id="image2" src="image2.jpg" alt="Image 2" class="hidden">
    <button id="toggleButton">Toggle Images</button>

    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#image1').toggleClass('hidden');
                $('#image2').toggleClass('hidden');
            });
        });
    </script>
</body>
</html>

遇到的问题及解决方法

问题：图片显示和隐藏效果不明显或不生效

原因：

jQuery 库未正确加载：确保 jQuery 库已正确引入。
选择器错误：确保使用正确的选择器来选择图片元素。
CSS 样式冲突：确保没有其他 CSS 样式覆盖了 jQuery 设置的 display 属性。

解决方法：

检查 jQuery 库是否已正确引入，可以通过浏览器的开发者工具查看。
确保使用正确的选择器，例如 $('#imageId') 或 $('.imageClass')。
检查并调整 CSS 样式，确保没有冲突。

示例代码修正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 图片显示隐藏示例</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <img id="image1" src="image1.jpg" alt="Image 1">
    <img id="image2" src="image2.jpg" alt="Image 2" class="hidden">
    <button id="toggleButton">Toggle Images</button>

    <script>
        $(document).ready(function() {
            $('#toggleButton').click(function() {
                $('#image1').toggleClass('hidden');
                $('#image2').toggleClass('hidden');
            });
        });
    </script>
</body>
</html>

通过以上方法，可以确保 jQuery 图片显示和隐藏功能正常工作。