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