极客教程如何使用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文件，看看我们实现的按钮的功能是否正常。
输出:
