Question

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

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

     <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();*/

                    }
            });
        });

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

如何以简单的方式实现此要求。我是JQuery的新手并且已经尝试了很多事情，我完全感到困惑。有人可以告诉我一种方法可以做到这一点。请提供有效或接近工作的解决方案。请不要提供文档链接。

感谢。

Answer 1

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

这种引用不起作用：

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

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

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

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

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

所有这一切......我强烈建议您查看您的实施。不使用具有半隐藏行的表，而是使用容器对象。它将大大简化您的代码并使更新更容易。正如你所拥有的......好吧，我怜悯下一个必须介入并努力维护它的人。

Answer 2

将我的脚本修改为

    $('.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的输入进一步考虑了它并使其工作并且不那么笨拙。

Jquery事件被触发作为副作用。如何阻止它

2 个答案: