Jquery 在点击事件后 class 只显示一个项目

Question

我是脚本编写新手 Jquery/Javascript，实际上我遇到了一些困难。我怎样才能通过相同的 class 显示一个项目而不影响其他项目？

我的代码：

$(function() {
  $('.embedContainer > .myPosterImage').on('click', function() {
    $('.embedContainer > .myPosterImage').hide();
    $('.embedContainer > embed').show();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="embedContainer">
  <img class="myPosterImage" src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" />
  <embed src="img/websites/Concept.pdf" width="563.41" height="375.98"></embed>
</div>

<div class="embedContainer">
  <img class="myPosterImage" src="img/websites/01_documentation.jpg" data-original="img/websites/full/01_full.jpg" />
  <embed src="img/websites/Concept.pdf" width="563.41" height="375.98"></embed>

</div>

非常感谢。

Answer 1

第一行将隐藏所有这些，这可能是你想要做的（如果你想折叠所有并展开点击的，例如）：

$('.embedContainer > .myPosterImage').hide();

但是正如您所发现的，第二行还将显示所有这些：

$('.embedContainer > embed').show();

您可以做的是从被单击的元素开始遍历 DOM（单击事件处理程序中的 this）。在这种情况下，您将向上遍历 DOM（例如使用 closest()）到一个公共父元素，然后返回（例如使用 find()）到目标元素。

像这样：

$(this).closest('.embedContainer').find('embed').show();

Jquery 在点击事件后 class 只显示一个项目

Jquery Show just one Item by the same class after click-event

html

javascript

css

scripting

jquery