jquery - 具有父单元格值的基本数学

Question

我有一个带有 id 值的表和每个单元格中的图像。到目前为止，当用户单击该单元格时，我的代码会显示该单元格 ID。当用户再次单击同一单元格时，它还会“取消显示”该 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);
  });