将计数器与2个表类组合在一起

时间:2013-02-22 22:38:40

标签: jquery html counter

当点击一个单元格进行课堂测试时,我有一个* 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。

1 个答案:

答案 0 :(得分:2)

演示: 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);
    });
});