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

如何使用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>

现在要检查上述代码,我们必须在浏览器中打开该HTML文件,看看我们实现的按钮的功能是否正常。

输出:

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

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

jQuery 方法