0

对一些 JQuery 进行一些清理工作。

我有一种情况，我需要使用 JQuery Toggle 折叠行。我在 SO 上找到了一个很好的示例，您可以在其中使用 TR 类设置切换范围的外部边界。

这很好用，但是 TR 中的每个元素都是“可点击的”，例如包含财务金额的 TD。

制定了一个功能，将图像添加到第一列。该图像应该是唯一可点击切换的东西。单击时，图像本身会在状态之间交换（显示“+”或“-”）。

我认为最好的方法是让类选择器关注第一个 TD 中的 IMG。但我无法正确使用语法。我想知道由于图像是由 Prepend 注入的，所以会导致问题。

我简要测试了将行切换驻留在图像交换函数中的想法，但遇到了问题。

这是JSFiddle：

http://jsfiddle.net/novadar/Gnnue/94/

这是稍微起作用的功能：

// Enable Row Toggle
$(document).ready(function () {
    $(".rowToClick").click(function () {
        $(this).nextUntil(".rowToClick").toggle();
    });
});

这是一个专注于第一个 TD 但不能正确切换的函数（仅切换 TR 中的剩余列）。

// Enable Row Toggle  toggle from first cell
$(document).ready(function () {
    $(".rowToClick td:nth-child(1)").click(function () {
        $(this).nextUntil(".rowToClick").toggle();
    });
});

谢谢！

4

1 回答 1

1

由于图像是该行的孙子，您需要向上导航到切换代码的​​祖父：

$(document).ready(function () {
    $(".rowToClick td:nth-child(1) img").click(function () {
        $(this).closest(".rowToClick").nextUntil(".rowToClick").toggle();
    });
});

小提琴

于 2013-04-03T04:48:34.417 回答