DEMO

<th>位于带有类名的<tr>中，每个行都有类似的命名...

rowToClick1 rowToClick2

......等等。

在for循环中，我动态生成数据 - 我有<tr>个类名，类似于上面的名字......

rowToExpand1 rowToExpand2

......等等。

目前，我的解决方案正在努力扩展/折叠这些表格，但它实际上是丑陋：

$('.rowToClick1').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-';
    });
    $(".rowToExpand1").toggle();
});

$('.rowToClick2').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-';
    });
    $(".rowToExpand2").toggle();
});

// Many more similar functions repeatedly, up to 20+ ..

如何更有效地完成这项工作？

注意：我不希望这些表格同时展开/折叠，而是单独展开（就像我现在一样）。

提前致谢。

Answer 1

我建议：

// binding the event to the 'th':
$('th').click(function () {
    // finding the contained 'span' element, manipulating its text (as before):
    $(this).find('span').text(function (_, value) {
            return value == '-' ? '+' : '-';
        // finding the closest 'thead' (in which the 'th' elements are contained:
        }).closest('thead')
        // finding the sibling 'tbody' element:
        .next('tbody')
        // finding the 'tr' descendants:
        .find('tr')
        // toggling their visibility:
        .toggle();
});

JS Fiddle demo

如果您只有一个 <tbody>元素，则上述情况有效;如果你应该有多个元素that approach doesn't work（由于使用了next()）;如果有（可能）更多<tbody>个元素，那么您可以使用nextAll()：

$('th').click(function () {
    $(this).find('span').text(function (_, value) {
            return value == '-' ? '+' : '-';
        }).closest('thead').nextAll('tbody').find('tr').toggle();
});

JS Fiddle demo

参考文献：

Answer 2

$('tr[class^="rowToClick"]').click(function () {
    $(this).find('span').text(function (_, value) {
        return value == '-' ? '+' : '-';
    });
    var className = $(this).attr("class");
    var id = className.replace("rowToClick","");
    $(".rowToExpand"+id).toggle();
});

Answer 3

看看这个......

http://jsfiddle.net/72TFR/2/

$('tr[class^="rowToClick"]').click(function () {
    // remove all non-numbers from the class with regex
    theNumber = $(this).attr('class').replace(/\D/g,'');
    // append the variable to the class name
    $(".rowToExpand"+theNumber).toggle();
});

看一下文档：

tr[class^="rowToClick"]：http://api.jquery.com/attribute-starts-with-selector/

使用更优雅的解决方案展开/折叠多个表行

DEMO

3 个答案: