添加和删除 class on click 单选标签

Question

我有一个包含无线电输入和文本的列表。当我检查一个时，它添加了一个 class of checked 添加到它（这不在示例中）。我想隐藏收音机并只显示文本。

我已经尝试了一些 JS 代码并且我有一个几乎可以工作的示例，但是有两件事不能正常工作。

首先是在页面加载时任何文本都被标记为活动，其次是当我单击其他文本时 class 活动不会被删除。

$(".attrprod").click(function(e) {
  $(this).addClass("active").siblings().removeClass("active");
});

.active {
  border: 2px solid red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
  <li>
    <label>
      <div class="radio"><span class="checked"><input type="radio" class="attribute_radio" name="group_1" value="954" checked="checked"></span>
      </div>
      <span class="attrprod">36</span>
    </label>
  </li>
  <li>
    <label>
      <div class="radio"><span><input type="radio" class="attribute_radio" name="group_1" value="956"></span></div>
      <span class="attrprod">37</span>
    </label>
  </li>
  <li>
    <label>
      <div class="radio"><span><input type="radio" class="attribute_radio" name="group_1" value="957"></span></div>
      <span class="attrprod">38</span>
    </label>
  </li>
  <li>
    <label>
      <div class="radio"><span><input type="radio" class="attribute_radio" name="group_1" value="958"></span></div>
      <span class="attrprod">39</span>
    </label>
  </li>
  <li>
</ul>

Answer 1

为什么不先使用 attrprod 删除所有 active 的 classes ..然后尝试设置 class 通过 this

$(".attrprod").click(function (e) {
    $(".attrprod").removeClass("active");
    $(this).addClass("active");
});

Answer 2

对于第一期，将活动 class 添加到要在页面加载时突出显示的文本，如下所示

<span class="attrprod active">36</span>

对于第二期，这行代码可能是您的问题：

 $(this).addClass("active").siblings().removeClass("active");

您可能想先删除 classes，然后将其添加到所选元素：

$(".attrprod").click(function (e) {
$(".attrprod").removeClass("active"); // remove all current selections
$(this).addClass("active"); // select this element
});

添加和删除 class on click 单选标签

Add and remove class on click radio label

javascript

jquery

element

hide

radio

添加和删​​除 class on click 单选标签

Add and remove class on click radio label

javascript

jquery

element

hide

radio

添加和删除 class on click 单选标签