點擊收音機標籤上的添加和刪除類

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 ..然後嘗試設置class通過this

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