如何使用 jQuery 在按钮单击时隐藏/显示图像？

在本文中，我们将了解如何在 jQuery 中在单击按钮时隐藏或显示任何特定图像。用几行 jQuery 代码很容易做到这一点。在我们进入主题之前，让我们知道 jQuery 的哪些方法将用于此。所以有一个方法叫show()，另一个是hide()，jQuery的这两个方法可以让我们的工作轻松很多。

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

jQuery CDN 链接：

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

HTML

    $(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);
        });
    });

上面编写的代码将负责在我们的网页上隐藏或显示图像。我们使用了一个 click() 方法，当 id(hide) 的按钮被点击时将调用该方法，而当 id(show) 的另一个按钮将被点击时，将调用另一个 click() 方法。在这两个 click() 方法中，还有另外两种方法被使用，它们是隐藏和显示，它们与 id(image) 的图像标签相关联。这样可以在单击按钮时更改此图像。我们为按钮添加了更多功能，以便当图像可见时，显示按钮将变灰，当图像不可见时隐藏按钮将变灰，这将提供更多用户的清晰度。

现在为了清晰的视图，让我们看一下带有完整代码的 HTML 页面。

例子：

HTML

  

  
    
    
    

  

  
    
    Show image
    Hide image
  
    
    
  
    
    
        $(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);
            });
        });
    

  

现在要检查上面的代码，我们必须在浏览器中打开该 HTML 文件并查看我们已实现的按钮的功能。

输出：