Question

我在一个基本HTML文档的标题中有4张图像。他们所有人都有“水果”类。我希望每个图像在单击时都单独消失，但是我不能完全正确地编写代码。

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

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

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

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

我看到了这样的解决方案：

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

但这不起作用。我在正确的轨道上吗？如何获取图片ID并将其隐藏到函数中？

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>

Answer 2

还可以使用香草javascript（更加冗长，但是有一点学习的机会）：

var targets = Array.from(document.getElementsByClassName('fruits'));
targets.map(function(target) { 
    target.addEventListener('click', function(e){ e.target.style.display = "none" })
};

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

2 个答案: