Question

const $jq = $;

$jq('#section-a li').on('click', function() {
  const el = $jq(this);
  el.addClass("answerPick").siblings(".answer").removeClass("answerPick");
  
  if (el.hasClass("answerPick")) {
    el.children(".circle").addClass("circleVisited").parent(".answer").siblings(".answer").children("circle").removeClass("circleVisited");
  }
});

.answerPick {
  
}

.circleVisited {

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="section-a" class="questions active">
  <fieldset>
    <legend>Is the Gift for a Man or Woman?
      <p>(CHOOSE ONE)</p>
    </legend>
    <ul>
      <li class="answer" data-url="male" data-select="1320072+"><img src="/Images/modules/bluehim_200x.jpg" class="baseimg">
        <p class="qText">Male</p>
        <p class="circle"></p>
      </li>
      <li class="answer" data-url="female" data-select="1320071+"> <img src="/Images/modules/blueher_200x.jpg" class="baseimg">
        <p class="qText">Female</p>
        <p class="circle"></p>
      </li>
    </ul>
  </fieldset>
</div>

我试图在单击时向（this）circleVisited的子级添加li类，更具体地说是添加带有circle类的p元素。但是，每个节一次只能有一个p元素可以拥有类circleVisited。

如果此li的类为answerPick，则找到该li的子类，类别为circle，并添加类circleVisited。然后使用“答案”类检查父元素，使用circle类检查其子元素，并删除circleVisited类（如果存在）。

抱歉，如果不清楚。如果您需要更多信息，请告诉我，我担心我遗漏了一些明显的东西，这使这件事变得比必要的更加困难。

Answer 1

您可以创建一条规则来考虑子项.circleAdded的样式，而不是向子项添加li

  li.answerPick > p.circle {
    /* Whatever you wanted .circle.circleVisited to look like */
  }

遍历DOM以更改sibling> child元素

1 个答案: