javascript - 如何使多个图像在使用 jQuery 单击时消失？

Question

我在基本 HTML 文档的标题中有 4 张图像。他们都有类=“水果”。我希望每个图像在单击时单独消失，但我无法完全正确地获取代码。

我已经能够让所有图像立即消失：

$(".fruits").click(function() {
     $(".fruits").hide();
});

我还可以仅使用图像的 id 使单个图像消失：

$("#apple").click(function() {
     $("#apple").hide();
});

我见过这样的解决方案建议：

$(".fruits").click(function(imgId) {
　　　　　$("#" + imgId).hide();
});

但这不起作用。我在正确的轨道上吗？如何让图像 id 拉入隐藏图像的功能？

标签： javascriptjqueryhtmlcss

Answer 1

$(".fruits").click(function() {
  $(this).hide();
})

.fruits {
  display: inline-block;
  border: 1px solid #000;
  padding: 15px;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
  <div class="fruits">Apple</div>
  <div class="fruits">Orange</div>
  <div class="fruits">Banana</div>
</header>