动态添加class后执行removeClass无效问题排查

问题背景 #

我有一个div，希望在选中特定radio选项时显示。该div位于form中，当幼儿来宾（在radio选项中选择"yes"）将出席时，隐藏的.guest__cot div应该显示，仅在有幼儿出席时展示婴儿床选项。

目前div能成功显示，但再次选择radio选项中的"no"时，该div仍保持可见（$(".guest__cot").removeClass("guest__cot--visible");未执行）。

复现步骤：

• 为"Name 1 (Toddler)"选择"yes"
• .guest__cot div出现
• 现在为"Name 1 (Toddler)"选择"no"，div仍保持可见

实际需求：若有任意幼儿选择"yes"则展示.guest__cot，否则隐藏它。

问题原因 #

你维护show-cot-field类的逻辑存在漏洞：当选中同组的"no" radio时，仅移除了当前"no" radio的类，但之前选中的"yes" radio仍保留着该类，导致$('.member__attendance-input').hasClass(showCotField)始终返回true，无法触发隐藏操作。

解决方案 #

直接检查所有选中的幼儿radio中是否存在value为"yes"的选项，无需额外维护类，逻辑更可靠：

修改后的JavaScript代码 #

(function($) {
  $(".member__attendance-input.is_toddler").on('change', function() {
    // 筛选出所有选中的、幼儿身份且选择出席的radio
    var hasToddlerAttending = $(".member__attendance-input.is_toddler:checked[value='yes']").length > 0;
    
    // 根据结果切换显示状态
    if (hasToddlerAttending) {
      $(".guest__cot").addClass("guest__cot--visible");
    } else {
      $(".guest__cot").removeClass("guest__cot--visible");
    }
  });
})(jQuery);

完整可运行代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="rsvp">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <form>
          <!-- member 1 -->
          <div class="member d-flex flex-column">
            <span class="member__name">Name 1 (Toddler)</span>
            <div class="member__attendance member__options d-flex">
              <div class="member__attendance-option">
                <input class="member__attendance-input is_toddler" id="attending-yes-0" type="radio" name="attending-0" value="yes" required />
                <label class="input-label" for="attending-yes-0">Yes</label>
              </div>
              <div class="member__attendance-option">
                <input class="member__attendance-input is_toddler" id="attending-no-0" type="radio" name="attending-0" value="no" required />
                <label class="input-label" for="attending-no-0">No</label>
              </div>
            </div>
          </div>

          <!-- member 2 -->
          <div class="member d-flex flex-column">
            <span class="member__name">Name 2 (Toddler)</span>
            <div class="member__attendance member__options d-flex">
              <div class="member__attendance-option">
                <input class="member__attendance-input is_toddler" id="attending-yes-1" type="radio" name="attending-1" value="yes" required />
                <label class="input-label" for="attending-yes-1">Yes</label>
              </div>
              <div class="member__attendance-option">
                <input class="member__attendance-input is_toddler" id="attending-no-1" type="radio" name="attending-1" value="no" required />
                <label class="input-label" for="attending-no-1">No</label>
              </div>
            </div>
          </div>

          <!-- member 3 -->
          <div class="member d-flex flex-column">
            <span class="member__name">Name 3 (Adult)</span>
            <div class="member__attendance member__options d-flex">
              <div class="member__attendance-option">
                <input class="member__attendance-input" id="attending-yes-2" type="radio" name="attending-2" value="yes" required />
                <label class="input-label" for="attending-yes-2">Yes</label>
              </div>
              <div class="member__attendance-option">
                <input class="member__attendance-input" id="attending-no-2" type="radio" name="attending-2" value="no" required />
                <label class="input-label" for="attending-no-2">No</label>
              </div>
            </div>
          </div>
          
          <div class="guest__cot">
            Show this div if either toddler options are "yes"
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

.rsvp {
  padding: 60px 0;
}

form {
  padding: 40px;
  border: 1px solid #000000;
}

.input-label {
  margin: 0 20px 0 0;
}

.member {
  margin-bottom: 30px;
}

.member__name {
  display: block;
  margin-bottom: 15px;
}

.member__options {
  margin-bottom: 20px;
}

.guest__cot{
  opacity: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

.guest__cot--visible {
  opacity: 1;
  height: auto;
  margin-top: 20px;
  pointer-events: auto;
}

说明 #

• 直接通过选择器$(".member__attendance-input.is_toddler:checked[value='yes']")精准筛选目标元素，避免类维护带来的残留问题
• 通过判断匹配元素的数量，准确掌握是否有幼儿出席，从而控制婴儿床选项的显示状态
• 代码逻辑简洁直观，减少出错概率

内容的提问来源于stack exchange，提问作者Freddy