在单击单选标签上添加和删除类

Question

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

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

第一个是在页面加载时任何文本都被标记为活动，第二个是当我点击其他文本时，活动类没有被删除。

$(".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

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

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

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

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

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

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

Answer 2

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

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