Jquery 事件作为副作用被触发。如何阻止这种情况

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 的超链接时使用此 JQuery display:none block 会被执行，但会触发 display:table-row > 由于其中的显示/隐藏功能而自行阻止。重新单击没有发生那么为什么再次模拟单击事件。我不想执行 display:table-row block 。当前，当 html 页面加载时，表格处于第二状态，即使在针对 Superman 单击 + 后，它仍保持相同状态，因为 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();

综上所述...我强烈建议您查看您的实现。不要使用具有半隐藏行的表，而是使用容器对象。它将极大地简化您的代码并使更新变得更容易。正如你所拥有的......好吧，我很遗憾下一个人必须介入并尝试维护它。