2

我有一个切换表的特定要求。切换我的意思是一个表格，它会在点击超链接的事件时展开和折叠。

我如何制作表格的片段是：

     <table class=".table" border="1">
     <tr id="1">
        <td><a href="#" class="action" id="a-1">+</a></td>
        <td>Superman</td>
     </tr>
     <tr id="version" class="child 1">
        <td></td>
        <td>Weight</td>
     </tr>
     <tr id="type" class="child 1">
        <td></td>
        <td>Height</td>
     </tr>
     <tr id="pl-id" class="child 1">
        <td><a href="#" class="action" id="a-1-101">+</a></td>
        <td>Planet</td>
     </tr>
     <tr id="KP" class="child 1-101">
        <td></td>
        <td>KP</td>
     </tr>
     <tr id="MN" class="child 1-101">
        <td></td>
        <td>MN</td>
     </tr>
     ..
     ..

表可以想象有一个排序的结构

1)  - Superman
        Weight
        Height
        - Planet
            KP
            MN


2)  + Superman


3)   - Superman
          - Planet
              KP
              MN

在第一个状态下点击-超人应该进入第二个状态而不是第三个状态。

JQuery 我写过这样做：

$().ready(function() {
            $('.child').hide();
            $('.action').click(function(){

                var id = $(this).attr('id');
                var idarray=id.split("-");
                var len = idarray.length;

                if(len==2)
                    {
                        id = id.substring(2);

                        if($(this).parent().parent().next().attr('style')=="display: none; "){
                            $('tr[class^=child '+id+'-1]').hide();
                            $('tr[class=child '+id+']').show();
                        }
                        if($(this).parent().parent().next().attr('style')=="display: table-row; "){
                            $('tr[class^=child '+id+'-1]').hide();
                            $('tr[class=child '+id+']').hide();
                        }

                    }
                else if(len==3)
                    {
                        //HAVEN'T REACHED TILL RESOLVING FOR 3 :(
                        /*id = id.substring(2);
                        alert(id);
                        $("."+id).toggle();
                        $('tr[class^=child '+id+']').hide();
                        $('tr[class=child '+id+']').show();*/

                    }
            });
        });

在单击超链接时使用此 JQueryid=a-1 display:none block会执行，但display:table-row由于其中的显示/隐藏功能，它会自行触发块。没有发生重新单击，那么为什么再次模拟单击事件。我不希望 display:table-row 块被执行。当前，当 html 页面加载时，表处于第二状态，即使在单击+Superman 后，它仍保持在相同状态，因为 if 和 else 条件都被评估，这使其恢复到原始状态。

如何以简单的方式实现这一要求。我是 JQuery 的新手，尝试了很多事情，我完全糊涂了。有人可以告诉我一种可以做到这一点的方法。请给出一个可行的或接近可行的解决方案。请不要提供文档链接。

谢谢。

4

2 回答 2

2

问题在于您的参考。请注意，JQuery 使用 Sizzle 选择器，它基本上为您提供 CSS 样式的元素引用。

这种引用不起作用：

$('tr[class=child '+id+']').show();

您需要使用属性列表选择器：

$('tr[class~=child][class~='+id+']').show();

或者，更好的是，因为您正在处理 CSS 类（除非您需要模糊匹配，否则不要对 ID 或类使用属性选择器）：

$('tr.child.'+id).show();

说了这么多……我强烈建议你看看你的实现。不要使用具有半隐藏行的表，而是使用容器对象。它将大大简化您的代码并使更新更容易。正如你所拥有的......好吧，我很同情下一个必须介入并试图维持它的人。

于 2012-07-01T00:29:37.800 回答
0

将我的脚本修改为

    $('.action').click(function(){

            var id = $(this).attr('id');    
            var idarray=id.split("-");
            var len = idarray.length;
            id = id.substring(2);

    if($(this).parent().parent().next().attr('style')=="display: none; "){
            $('tr[class=child '+id+']').show();
            $('tr[class^=child '+id+'-]').show();
            return false;
    }
    if($(this).parent().parent().next().attr('style')=="display: table-row; "){
            $('tr[class=child '+id+']').hide();
            $('tr[class^=child '+id+'-]').hide();
            return false;
    }

现在这工作正常。解决我的问题的行是return false;. 它停止了副作用 JQuery 事件。

在John Green的投入之后，对它进行了更多的思考，并使其工作并且不那么笨拙。

于 2012-07-01T08:07:26.577 回答