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

在网页设计中，我们经常需要隐藏或显示图片以达到效果或优化用户体验。下面介绍如何使用 jQuery 在按钮单击时隐藏和显示图像。

准备工作

在实现前，我们需要先引入 jQuery 库，以便使用它的库函数。在 HTML head 标签中加入以下代码：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

隐藏/显示图像

接着，在 HTML 中加入一张图片和一个按钮：

<img id="myImg" src="https://via.placeholder.com/150x150" alt="My Image">
<button id="myBtn">Hide/Show Image</button>

对应的 CSS：

#myImg {
  display: block;
  margin: 20px auto;
}

图片初始状态为显示，我们需要在 JS 中将其隐藏：

$(document).ready(function() {
  // 初始隐藏图片
  $('#myImg').hide();
});

最后，我们使用 jQuery 的 toggle() 函数实现按钮隐/显图片：

$(document).ready(function() {
  // 初始隐藏图片
  $('#myImg').hide();

  // 单击按钮隐藏/显示图片
  $('#myBtn').click(function() {
    $('#myImg').toggle();
  });
});

代码片段如下：

$(document).ready(function() {
  // 初始隐藏图片
  $('#myImg').hide();

  // 单击按钮隐藏/显示图片
  $('#myBtn').click(function() {
    $('#myImg').toggle();
  });
});

常见问题

如何设置图片速度？

如果想让图片渐变隐藏/显示，我们可以使用 fadeIn() 和 fadeOut() 函数，并参数传入时间（毫秒）：

$(document).ready(function() {
  // 初始隐藏图片
  $('#myImg').hide();

  // 单击按钮隐藏/显示图片
  $('#myBtn').click(function() {
    // 200毫秒淡入淡出
    $('#myImg').fadeToggle(200);
  });
});

如何控制多个图片？

如果我们需要控制多个图片，只需要修改选择器即可：

$(document).ready(function() {
  // 初始隐藏图片
  $('img').hide();

  // 单击按钮隐藏/显示图片
  $('#myBtn').click(function() {
    // 200毫秒淡入淡出
    $('img').fadeToggle(200);
  });
});

如果我们只想控制某个类别的图片，可以传入类选择器：

$(document).ready(function() {
  // 初始隐藏图片
  $('.myImg').hide();

  // 单击按钮隐藏/显示图片
  $('#myBtn').click(function() {
    // 200毫秒淡入淡出
    $('.myImg').fadeToggle(200);
  });
});

如何判断图片当前状态？

如果我们需要判断图片当前状态，例如隐藏或显示，我们可以使用 is() 函数：

$(document).ready(function() {
  // 初始隐藏图片
  $('#myImg').hide();

  // 单击按钮隐藏/显示图片
  $('#myBtn').click(function() {
    // 200毫秒淡入淡出
    $('#myImg').fadeToggle(200);

    // 判断图片当前状态
    if ($('#myImg').is(':visible')) {
      console.log('图片显示');
    } else {
      console.log('图片隐藏');
    }
  });
});