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();