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

Question

我有一个包含 radio 输入和文本的列表。当我检查一个时，它添加了一类 checked 添加到它(这不在示例中)。我想隐藏 radio 并只显示文本。

我已经尝试了一些 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
});