jQuery：不能有条件地将类添加到子元素

Question

我正在尝试有条件地将“close-3”类添加到祖先的所有子“输入”元素中。祖先应该包含类“.summon-next-element.on-sub-sub-level”。但是，我没有任何效果 - 没有添加类，控制台中没有错误，什么都没有。这是 jQuery：

$('.summon-next-element.on-sub-sub-level').each(function() {
  if ($(this).find("input").is(":checked")) {
    $(this).nextAll(".summoned-element").first().find("input").addClass("opened-3").removeClass("closed-3");
  } else {
    $(this).nextAll(".summoned-element").first().find("input").addClass("closed-3").removeClass("opened-3");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
  <input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
  <label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
  <input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
  <label for="frais_renovation_non">non</label>
</div>

<div class="summoned-element">

  <div class="checkbox info-circle right">
    <input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
    <label for="frais_renovation_fichier">
                Mes justificatifs 1
            </label>
  </div>

  <div class="checkbox info-circle right">
    <input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
    <label for="frais_renovation_tickets">
                Mes justificatifs 2
            </label>
  </div>

</div>
<!-- end of summoned element -->

非常感谢您的帮助！

Answer 1

还需要将您的逻辑包装在单选按钮选择事件中，根据该事件减少类的分配/删除：

$(this).on('click', function() { ... }

在您的代码中，还有一个不正确的类引用。

$('div').find('input[type=radio]').each(function() {
  $(this).on('click', function() {
    $('input[type=radio]').addClass("closed-3").removeClass("opened-3");
      if ($(this).is(":checked")) {
        $(this).addClass("opened-3").removeClass("closed-3");
      } 
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
  <input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
  <label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
  <input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
  <label for="frais_renovation_non">non</label>
</div>

<div class="summoned-element">

  <div class="checkbox info-circle right">
    <input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
    <label for="frais_renovation_fichier">
                Mes justificatifs 1
            </label>
  </div>

  <div class="checkbox info-circle right">
    <input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
    <label for="frais_renovation_tickets">
                Mes justificatifs 2
            </label>
  </div>

</div>
<!-- end of summoned element -->

Answer 2

问题是你没有循环遍历每个输入，所以当你检查输入是否被检查时，它总是会选择.on-sub-sub-level里面的第一个。

尝试：

$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
  if ($(this).is(":checked")) {
    $(this).addClass("opened-3").removeClass("closed-3");
  } else {
    $(this).addClass("closed-3").removeClass("opened-3");
  }
});

演示

$('.summon-next-element.on-sub-sub-level ~ .summoned-element input').each(function() {
  if ($(this).is(":checked")) {
    $(this).addClass("opened-3").removeClass("closed-3");
  } else {
    $(this).addClass("closed-3").removeClass("opened-3");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="summon-next-element on-sub-sub-level">
  <input type="radio" name="frais_renovation" id="frais_renovation_oui" class="oui">
  <label for="frais_renovation_oui">oui</label>
</div>
<div class="checkbox">
  <input type="radio" name="frais_renovation" id="frais_renovation_non" class="non">
  <label for="frais_renovation_non">non</label>
</div>

<div class="summoned-element">

  <div class="checkbox info-circle right">
    <input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_fichier">
    <label for="frais_renovation_fichier">
                Mes justificatifs 1
            </label>
  </div>

  <div class="checkbox info-circle right">
    <input type="radio" name="frais_renovation_justificatifs" id="frais_renovation_tickets" checked>
    <label for="frais_renovation_tickets">
                Mes justificatifs 2
            </label>
  </div>

</div>
<!-- end of summoned element -->