Объединение счетчика с 2 классами таблиц

Question

У меня есть счетчик * 10 при нажатии на ячейку для теста класса и счетчик * 20 при нажатии на ячейку для класса вредителя. Как я мог объединить эти счетчики, чтобы они отображались в одном div? Он работает, как, например, я нажимаю на тестовую ячейку, будет отображаться 10. Если я нажму на другую тестовую ячейку, отобразится 20. Если я повторно щелкнув по тестовой ячейке, 10 будет отображаться, поскольку ячейка будет «деактивирована». То же самое работает для клеток-вредителей, но это будет в 20-е годы. Прямо сейчас это не считается правильным, когда я пытаюсь щелкнуть как тестовые, так и вредоносные ячейки. любая помощь?

<table> 
<tr> 
<td class='test' id='g'><img src='images/Cat.gif'/></td> 
<td class='test' id='g'><img src='images/Dog.gif'/></td> 
<td class='pest' id='e'><img src='images/Mouse.gif'/></td> 
<td class='pest' id='e'><img src='images/Human.gif'/></td> 
</tr> 
</table> 

JS:

$(document).ready(function() { 
var clicked = []; 
$('td.test').click(function() { 
    var found = clicked.indexOf(this.id);  
    if(found !== -1) { 
     clicked.splice(found, 1);  
    } else { 
     clicked.push(this.id); 
    }  
    $('#output').text(clicked.length*20); 
}); 
}); 

$(document).ready(function() { 
var clicked = []; 
$('td.pest').click(function() { 
    var found = clicked.indexOf(this.id);  
    if(found !== -1) { 
     clicked.splice(found, 1);  
    } else { 
     clicked.push(this.id); 
    }  
    $('#output').text(clicked.length*20); 
}); 
}); 

Для примера: прямо сейчас, когда я нажимаю на 1 испытательную камеру и 1 вредителя клетки он отображает 20 вместо 30.

Answer 1

Демо:http://jsfiddle.net/ZjsVB/

$(document).ready(function() { 
    $('td.test, td.pest').click(function() { 
     $(this).toggleClass('active'); 

     var testCount = $('td.test.active').length * 10; 
     var pestCount = $('td.pest.active').length * 20; 

     $('#output').text(testCount + pestCount); 
    }); 
});