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說...我強烈建議你看看你的實現。使用容器對象，而不是使用具有半隱藏行的表。它將大大簡化您的代碼並使更新更容易。就像你擁有它......好吧，我可憐下一個必須介入並努力維護它的人。