0

クラステスト用のセルをクリックすると*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つの害虫セルをクリックすると、30ではなく20が表示されます。

4

1 に答える 1

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);
    });
});
于 2013-02-22T22:53:07.947 に答える