Question

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

我已经尝试了一些JS代码，我有一个几乎可以工作的样本，但有两件事情不能很好。

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

＆＃13;

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

＆＃13;

.active {
  border: 2px solid red
}

＆＃13;

<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>

＆＃13;

Answer 1

为什么不首先使用classes 删除所有<{strong> active attrprod ..然后尝试通过{{class设置this 1}}

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

Answer 2

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

<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
});

在点击广播标签上添加和删除类

2 个答案: