Базовая математика с родительским значением ячейки

Question

У меня есть таблица с значениями id и изображением в каждой ячейке. Пока мой код отображает идентификатор ячейки, когда пользователь нажимает на эту ячейку. Он также «не отображает» этот идентификатор, когда пользователь снова нажимает на одну и ту же ячейку. То, что я сейчас пытаюсь сделать, - это присвоить номер 10 моему классу таблицы, так что, когда вы нажмете на ячейку, она отобразит 10, или если вы нажмете на 2 ячейки, она отобразит 20, но если вы нажмете одну из Ячейки снова вычитают 10. Надеюсь, это достаточно легко понять.

Вот мой код до сих пор: HTML:

<table> 
<tr> 
<td class='test' id='1'><img src='images/Dog.gif'/></td> 
<td class='test' id='2'><img src='images/Cat.gif'/></td> 
<td class='test' id='3'><img src='images/Mouse.gif'/></td> 
<td class='test' id='4'><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.join(',')); 
}); 
}); 

Answer 1

Я не совсем уверен, что я вас понимаю, но это он:

$('#output').text(clicked.length*10); 

Answer 2

Это должно быть просто. попробуйте следующее:

var score = 0; 

    $('td.test').click(function() { 
     var $this = $(this); 
     if (!$this.hasClass('clicked')) { 
      $this.addClass('clicked'); 
      score += 10; 
     } else { 
      $this.removeClass('clicked'); 
      score -= 10; 
     } 
     $('#output').text(score); 
    });