javascript - 获取图像覆盖/类以根据父元素的类显示 onclick

Question

我刚刚被分配了第一个工作项目，但在最后的细节方面遇到了一些问题。

本质上，当用户单击“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>

您会注意到所选图像旁边有一个名为“Check1Mobile”的图像。该图像通过 .hide() 自动隐藏。

基本上，我想做的是，当单击 li 项目并赋予“answerPick”类时，使用 .show() 显示检查图像。我试图在点击功能期间仅定位“topimg”类的特定实例，因为我对每个表单问题都使用该图像/类。

这是一段代码。我可以包含所有内容，但我是一个 JavaScript 磨砂膏，所以说实话，它很困惑。

  $jq('.answer img').click(function () {
if ((this).parent().hasClass('answerPick')) {
  $jq('.topimg').show();
}
else {
  $jq('.topimg').hide();
} });

Answer 1

根据您编写的代码片段，它应该是:

$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'))
   });

这是一个jsfiddle举个例子。