如何使用jQuery在点击按钮时隐藏或显示一个图像

在这篇文章中，我们将看到当一个按钮被点击时，我们如何在jQuery中隐藏或显示任何特定的图像。这是很容易做到的，只需要几行jQuery的代码。在我们进入主题之前，让我们知道jQuery的哪些方法将被用于此。有一个方法叫show()，另一个叫hide()，这两个jQuery的方法可以让我们的工作变得更容易。

在本教程中，我们将使用jQuery的CDN链接来使用它。我们必须将以下代码粘贴到我们的HTML页面的head标签内。这个脚本可以在jQuery的官方网站上找到。

jQuery CDN链接：

<script src=”https://code.jquery.com/jquery-3.6.0.min.js” integrity=”sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=” crossorigin=”anonymous”></script>

现在让我们看看我们要在页面中实现的功能的jQuery代码是什么。

<script>
    (document).ready(function () {
        ("#image").hide();
        ("#hide").attr('disabled', true);
        ("#hide").click(function () {
            ("#image").hide();
            ("#hide").attr('disabled', true);
            ("#show").attr('disabled', false);
  
        });
        ("#show").click(function () {
            ("#image").show();
            ("#hide").attr('disabled', false);
            $("#show").attr('disabled', true);
        });
    });
</script>

上面写的代码将负责在我们的网页上隐藏或显示图像。我们使用了一个click()方法，当id(hide)的按钮被点击时，该方法将被调用，当另一个id(show)的按钮被点击时，另一个click()方法将被调用。在这两个click()方法中，还有两个与id(image)的图像标签相关的方法，即hide和show。这样，这个图像就可以在点击按钮时被改变。我们为按钮增加了一些功能，当图像可见时，显示按钮将变灰，当图像不可见时，隐藏按钮将变灰，这将给用户带来更多的清晰度。

现在，为了清楚地了解情况，让我们看看我们的HTML页面和完整的代码。

示例:

<!DOCTYPE html>
<html lang="en">
  
<head>
  
    <!-- CDN link of jQuery -->
    <script src=
    "https://code.jquery.com/jquery-3.6.0.min.js"
        integrity=
"sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
  
    <!-- Both buttons that will hide
        or show the image -->
    <button id="show">Show image</button>
    <button id="hide">Hide image</button>
  
    <!-- Image that will follow the 
        commands accordingly -->
    <img id="image" src="gfglogo.png"
        alt="Photo">
  
    <!-- Code for hiding or showing image 
        on button click -->
    <script>
        (document).ready(function () {
            ("#image").hide();
            ("#hide").attr('disabled', true);
            ("#hide").click(function () {
                ("#image").hide();
                ("#hide").attr('disabled', true);
                ("#show").attr('disabled', false);
  
            });
            ("#show").click(function () {
                ("#image").show();
                ("#hide").attr('disabled', false);
                $("#show").attr('disabled', true);
            });
        });
    </script>
</body>
  
</html>