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日国家应采取第二个状态而不是第三国。

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-1display:none block的超级链接使用这个jQuery是执行，但它触发自身由于display:table-row块，以显示其内部/隐藏功能。 再点击没有发生，那么为什么单击事件再次模拟。我不希望显示：表格行块得到执行。目前表是在第二状态下，因为如果和其他条件都越来越评估带来它回到原来的状态HTML页面加载，甚至点击+反对超人之后保持在相同的状态。

这怎么能要求一个简单的方法来实现。我是JQuery的新手，并且尝试了很多事情来完成我完全困惑的事情。有人可以告诉我一个可以做到这一点的方法。请给出一个工作或接近工作的解决方案。请不要链接到文档。

谢谢。

Answer 1

修改了我的脚本

$('.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输入提供了更多想到进去后，并使其工作，少拙。

Answer 2

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

这种引用的是行不通的：

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

你需要使用属性列表选择：

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

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

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

所有那些bei ng说...我强烈建议你看看你的实现。使用容器对象，而不是使用具有半隐藏行的表。它将大大简化您的代码并使更新更容易。就像你拥有它......好吧，我可怜下一个必须介入并努力维护它的人。