Question

我刚刚分配了我的第一个工作项目，并且在最后的细节方面遇到了一些麻烦。

基本上，当用户点击＆＃34; answerPick＆＃34;的类中的列表项时添加到李。当用户点击另一个li项目来更改他们的答案时，他们会回答＃34; answerPick＆＃34;从第一个选项中删除并添加到新选项中。在表单的最后，用户提交并使用＆＃34; answerPick＆＃34;的类来获取附加到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>

你会注意到我有一张名为＆＃34; Check1Mobile＆＃34;在所选图像旁边。该图像通过.hide（）自动隐藏。

基本上我尝试做的是使用.show（）显示检查图像，当点击li项目并给出类＆＃34; answerPick＆＃34;。我试图只针对课程的特定实例＆＃34; topimg＆＃34;在点击功能期间，因为我对每个表单问题使用该图像/类。

这是一段代码。我可以包含所有内容，但我是一个javascript scrub，所以它很麻烦，说实话。

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

Answer 1

Based on the piece of code you have written it should be:

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

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

But I can also suggest :

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

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

Here's a jsfiddle以获取实例。

获取图像叠加/类以显示onclick，具体取决于父元素的类

1 个答案: