Получение оверлея / класса изображения для отображения onclick в зависимости от класса родительского элемента

Question

Я только что получил свой первый проект для работы, и у меня возникли некоторые проблемы с последними деталями.

По сути, когда пользователь щелкает элемент списка в классе «answerPick», он добавляется в li.Когда пользователь щелкает другой элемент li, чтобы изменить свой ответ, класс «answerPick» удаляется из первого выбора и добавляется в новый выбор.В конце формы пользователь отправляет, а я беру все значения, прикрепленные к элементам li, с классом «answerPick».

Вот пример структуры одного из вопросов формы:

<!--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 ().

По сути, я пытаюсь показать контрольное изображение, используя .show (), когда по элементу li нажимают и ему присваивается класс «answerPick».Я пытаюсь ориентироваться только на конкретные экземпляры класса 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 дляживой пример.