如何知道具有特定背景顏色的元素數量？

Question

我有一張桌子。當我點擊一個td時，它會爲該td添加背景顏色，該顏色取決於單選按鈕，然後它將統計具有xxx背景顏色的td的數量。

你可以看看JSFiddle的演示。你必須先選中一個單選按鈕。

這是我的JS。

var method1 = 0; 
var method2 = 0; 
var method3 = 0; 
var method4 = 0; 
var method5 = 0; 
var clickedTeeth; 

$('td').click(function(){ 
    if($('input[type=radio]').is(':checked')) { 
      var clickingTeeth = $(this).attr('id'); 
      if(clickedTeeth == clickingTeeth) { 

     } else { 
      clickedTeeth = clickingTeeth; 
      var color; 
      var value = $("input:radio:checked").val(); 
      value = parseInt(value); 
      switch(value){ 
       case 1: 
        color = 'red'; 
        break; 
       case 2: 
        color = 'blue'; 
        break; 
       case 3: 
        color = 'green'; 
        break; 
       case 4: 
        color = 'yellow'; 
        break; 
       case 5: 
        color = 'purple'; 
        break; 
      } 
      $(this).css('background-color',color); 
      updateResult(); 
     } 

} else { 
    alert('You must check radio button first'); 
} 
}); 

function updateResult(){ 
    $('td').each(function(){ 
     if($(this).css('background-color') == 'red'){ 
      method1++; 
     } 
     if($(this).css('background-color') == 'blue'){ 
      method2++; 
     } 
     if($(this).css('background-color') == 'green'){ 
      method3++; 
     } 
     if($(this).css('background-color') == 'yellow'){ 
      method4++; 
     } 
     if($(this).css('background-color') == 'purple'){ 
      method5++; 
     } 
    }); 
    alert(method1); // Alert amount of red here. 
} 

謝謝。

Answer 1

你的情況：

var method1 = 0; 
var method2 = 0; 
var method3 = 0; 
var method4 = 0; 
var method5 = 0; 
var clickedTeeth; 

$('td').click(function(){ 
    if($('input[type=radio]').is(':checked')) { 
     var clickingTeeth = $(this).attr('id'); 
     if(clickedTeeth == clickingTeeth) { 

     } else { 
      clickedTeeth = clickingTeeth; 
      var color; 
      var value = $("input:radio:checked").val(); 
      value = parseInt(value); 
      switch(value){ 
       case 1: 
        color = 'red'; 
        updateResult(++method1); 
        break; 
       case 2: 
        color = 'blue'; 
        updateResult(++method2); 
        break; 
       case 3: 
        color = 'green'; 
        updateResult(++method3); 
        break; 
       case 4: 
        color = 'yellow'; 
        updateResult(++method4); 
        break; 
       case 5: 
        color = 'purple'; 
        updateResult(++method5); 
        break; 
      } 
      $(this).css('background-color',color); 
     } 

    } else { 
    alert('You must check radio button first'); 
    } 
}); 

function updateResult(method){ 
alert(method); // Alert amount of red here. 
}