Javascript 根据父元素的类获取要显示onclick的图像覆盖/类

我刚被分配到我的第一个工作项目，我对最后的细节有一些麻烦

本质上，当用户单击“answerPick”类中的列表项时，会将其添加到li中。当用户单击另一个li项目以更改其答案时，“answerPick”类将从第一个选项中删除，并添加到新选项中。在表单的末尾，用户提交，我使用“answerPick”类获取附加到li项的所有值

以下是一个表格问题的结构示例：

<!--Section B-->
  <section id="section-b" class="grid">
    <div class="content-wrap">
    <div class="section-question">
    <img src="/Images/modules/GiftThemeHeader_418x50.jpg">
 </div>
      <ul class="answer-options-grid">
        <li class="answer" data-url="relaxation"><img src="/Images/modules/Relaxation_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Relaxation</li>
        <li class="answer" data-url="skincare"><img src="/Images/modules/BodyCare_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Body Care</li>
        <li class="answer" data-url="date-night"><img src="/Images/modules/DateNight_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">Date Night</li>
        <li class="answer" data-url="at-home-spa"><img src="/Images/modules/Spa_200x150.jpg" class="baseimg"> <img src="/Images/modules/Check1Mobile.png" class="topimg">At-home spa </li>
      </ul>
</div>
    </section>

---

根据您编写的代码，它应该是：

$jq('.answer img').click(function () {
  $jq('.topimg').hide()

  if ($jq(this).parent().hasClass('answerPick')) {
    $jq(this)('.topimg').show();
  }
});

但我也可以建议：

  $jq('.answer img').on('click', function () {
      const el = $jq(this)

      el.parent().find('.topimg')
      el.find('.topimg').toggle(el.hasClass('answerPick'))
   });

---

这里有一个示例。

要使

parent（）

在jQuery上下文中工作，您需要将它包装在

$

中，因此

$（此）.parent（）

感谢您的回复。当用户单击其中一个li项目时，answerPick将自动添加。因此，对于if语句，它看起来像

if（（this）.parent（）.hasClass（'answerPick'））{

那将是

if（$（this）.parent（）…

或

if（$jq（this）.parent（）…

非常感谢Louys！您是否知道我是否需要瞄准并显示/隐藏附加到多个图像的类的一个特定实例？我认为这可能是我的问题。感谢您的回答，Laura。我实际上尝试了这两种方法，但当单击li选项并获得answerPick类时，复选标记图像仍然没有显示。如果我只是发布一个包含全部代码的JSFIDLE，会有帮助吗？没什么太长的，只是4个问题，一些样式和背后的JS代码。你能给我你用来添加

。answerPick

类的代码吗，这样我就可以尽可能接近你的原始代码了？谢谢你，你知道我有什么需要帮助的吗rget和show/hide，一个附加到多个图像的类的特定实例？我认为这可能是我的问题，因为topimg应用于整个页面的隐藏复选标记覆盖。例如，隐藏/显示您单击的

li

的

topimg

？当然。请稍候

  $jq('.answer img').on('click', function () {
      const el = $jq(this)

      el.parent().find('.topimg')
      el.find('.topimg').toggle(el.hasClass('answerPick'))
   });