Jquery在单击事件后仅显示同一类的一个项目

Posted 2023-02-22

【中文标题】Jquery在单击事件后仅显示同一类的一个项目

【英文标题】：Jquery Show just one Item by the same class after click-event

【发布时间】：2022-01-24 01:01:51

【问题描述】：

我是编写 Jquery/javascript 脚本的新手，实际上我有些挣扎。 如何在不影响其他项目的情况下按同一类显示一个项目？

我的代码：

$(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"  ></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"  ></embed>

</div>

非常感谢。

【问题讨论】：

使用$(this) 相对于您单击的元素进行导航。

【参考方案1】：

第一行会将它们全部隐藏，这可能是您想要做的（例如，如果您想全部折叠并展开单击的一个）：

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

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

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

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

类似这样的：

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