1

我目前正在构建一个页面，该页面使用一些 jquery 来显示和隐藏一系列表和嵌套表。在页面上，有围绕所有数据的主表。下面是该表的数据，该表也被定义为父表（class = "parent"）。父表可能与一个、两个或没有子表相关联（class = "child"; class = "child1"）。

我编写了 javascript，以便在加载时隐藏所有子表。如果子表与父表相关联，则会有一个 [+] 符号可以按下以展开该嵌套表以供用户查看。基本的 javascript 说，如果一行被定义为“父”并且下一个 tr 元素是“子”，则在加载时隐藏该元素。此外，当单击“a”元素（我已将其设置为 [+]）时，这将展开和折叠该子“tr”元素，在本例中为嵌套表。此外，一次只能扩展一个父表的子表。这是此基本功能的 jsfiddle：

http://jsfiddle.net/rUgfW/9/

现在我最终需要做的是考虑三种不同的可能性：1）有一个'tr.parent'元素后跟一个'tr.child'元素（目前在前面的jsfiddle代码中处理）。2）有一个'tr.parent'元素后跟一个'tr.child1'元素（child1代表不同的子表，与'tr.child'具有不同的数据集）。3) 有一个 'tr.child' 元素后跟一个 'tr.child1' 元素（如果 'tr.parent' 有两种类型的子表都与之相关联）。

我创建了 javascript 代码来隐藏加载时的所有子表，这满足了所有三个定义的可能性。这只需添加额外的两个条件即可实现：

$('tr.parent').next('tr.child1').hide();
$('tr.child').next('tr.child1').hide();

我面临的问题是我不确定如何定义 $child 变量以包含所有三种可能性。为了显示和隐藏子表，这将是必要的。我尝试使用 IF 测试，但我很确定我的逻辑（可能还有我的语法）不正确：

if ('tr.parent').next('tr.child') != null
     {
     $child = $this.closest('tr.parent').next('tr.child');
     }
if ('tr.parent').next('tr.child1') != null
     {
     $child = $this.closest('tr.parent').next('tr.child1');
     }
if ('tr.child').next('tr.child1') != null
     {
     $child = $this.closest('tr.child').next('tr.child1');
     }

这是jsfiddle：

http://jsfiddle.net/rUgfW/16/

如您所见，添加这一系列 IF 语句会破坏加载时隐藏功能，并且根本不起作用。

有人对我如何满足所有这三个要求有任何建议吗？（提前致谢）

4

2 回答 2

1

你这里有一个逗号错误：

var $this = $(this), //not comma here! Should be ";"

还：

if (('tr.parent').next('tr.child') != null) {
    ^ missing a $ here??

还有两件事：

  • 对 if 语句使用正确的语法：if(statement){code}with()
  • 这永远不会是 null $('tr.parent').next('tr.child')，它永远是一个 jQuery 对象。也许你应该有if($('tr.parent').next('tr.child').length){

建议

$(document).ready(function () {
    $('tr[class^=child]').hide();
    $('a.toggle').on('click', function (e) {
        e.preventDefault();
        var $this = $(this);
        var nxt = $this.closest('tr.parent').nextAll('tr').each(function(){
            if($(this).hasClass('parent')){return false; }
            $(this).toggle();
        });
    })
});

演示在这里

于 2013-10-09T13:26:01.710 回答
0

我想你正在寻找

var $parent = $this.closest('tr.parent'),
    $child = $parent.next('tr.child');
if ($child.length == 0) {
    $child = $parent.next('tr.child1');
    if ($child.length == 0) {
        $child = $this.closest('tr.child').next('tr.child1');
    }
}
于 2013-10-09T13:30:52.147 回答