jQuery的addClass

Question

我有以下代碼：

var selectedMarkerClass = 'was-selected'; 

$('.group_1').change(function() { 
    $(this).addClass(selectedMarkerClass); 

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) { 
     $('#2').removeClass('red'); 
    } 
}); 

這裏是有問題的HTML：

<input class="single_text_input group_1" type="text" name="primary_referral" /> 
<input class="single_text_input group_1" type="text" name="secondary_referral" /> 
<input class="group_1" type="radio" name="referral_open" value="Yes" /> Yes 
<input class="group_1" type="radio" name="referral_open" value="No" /> No 
<span id="2" class="red">Referral Group</span> 

現在發生的事情是，這兩個單選按鈕在該組中必須進行更改才能將該課程從span中刪除。我希望它能夠在組中只有一個單選按鈕被改變的情況下工作。

Answer 1

使用click事件不是change事件。

$('.group_1').click(function() { 
    $(this).addClass(selectedMarkerClass); 

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) { 
     $('#2').removeClass('red'); 
    } 
}); 

更新：

if ($('.' + selectedMarkerClass).length == $('.group_1').length) 

是絆倒你。只有在選定的課程已添加到每個無線電廣播中，並且只有在單擊每個廣播時才能添加所選的課程，您將移除紅色課程。

一個更好的辦法是：

$('.group_1').click(function() { 
    $('#2').removeClass('red'); 
}); 

更少的代碼往往是次爲宜。你不能取消選擇收音機。所以點擊收音機確保至少有一個點擊。

Answer 2

請嘗試使用click事件。您看到更改發生在第二次點擊之後，因爲change在第一個單選按鈕失去焦點後被觸發。

Answer 3

在兩個單選按鈕發生變化後，$('.' + selectedMarkerClass).length == 2和$('.group_1').length == 4因爲您正在使用.group_1類用於單選按鈕，也用於輸入[type = text]。

需要篩選單選按鈕，使用"[name=referral_open]"，

var selectedMarkerClass = 'was-selected'; 

$('.group_1').change(function() { 
    $(this).addClass(selectedMarkerClass); 

    if ($('.' + selectedMarkerClass).length == $('.group_1[name=referral_open]').length) { 
     $('#2').removeClass('red'); 
    } 
});