0

各セルに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(','));
});
});
4

2 に答える 2

1

よくわかりませんが、これで終わりですか。

$('#output').text(clicked.length*10);
于 2013-02-22T20:57:16.943 に答える
0

これは単純なはずです。以下を試してください

  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);
  });
于 2013-02-22T21:15:42.440 に答える