切換具有相同的類名

Question

我有使用jQuery切換的問題。當我對某些標籤使用相同的類名時，我只想單擊按鈕即可獲得一個事件。

我的一些代碼位於下方，如果點擊名爲'1'的按鈕，它將顯示'2'和'5'的行，因爲它們具有相同的類名'detail'。然而，如果我點擊'1'，我想只顯示'2'的行。

我不願意使用不同的名稱，因爲它應該有很多具有切換功能的行。這意味着我需要爲每個標籤提供許多名稱。

請幫助我一些解決方案和建議，謝謝。

---腳本----

<script> 
      $(".button").click(function() { 
       $(".detail").slideToggle("slow"); 
      }); 
      $(".button2").click(function() { 
       $(".detail2").slideToggle("slow"); 
      }); 
    </script> 

--- HTML -----

<table class="w850 table"> 
     <tr> 
      <td class="w50"> 
       <input type="checkbox" /> 
      </td> 
      <td class="w50"> 
       <input type="button" value="1" class="button"/> 
      </td> 
      <td class="w250"> 
       Scan 
      </td> 
      <td class="w250"> 
       Status 
      </td> 
      <td class="w250"> 
       Ship Type 
      </td> 
     </tr> 
     <tr class="detail" style="display: none"> 
      <td class="w50"> 
       <input type="checkbox" /> 
      </td> 
      <td class="w50"> 
       <input type="button" value="2" class="button2"/> 
      </td> 
      <td class="w250"> 
       Scan 
      </td> 
      <td class="w250"> 
       Status 
      </td> 
      <td class="w250"> 
       Ship Type 
      </td> 
     </tr> 
     <tr class="detail2" style="display: none"> 
      <td class="w50"> 
       <input type="checkbox" /> 
      </td> 
      <td class="w50"> 
       <input type="button" value="3" /> 
      </td> 
      <td class="w250"> 
       Scan 
      </td> 
      <td class="w250"> 
       Status 
      </td> 
      <td class="w250"> 
       Ship Type 
      </td> 
     </tr> 
     <tr> 
      <td class="w50"> 
       <input type="checkbox" /> 
      </td> 
      <td class="w50"> 
       <input type="button" value="4" class="button"/> 
      </td> 
      <td class="w250"> 
       Scan 
      </td> 
      <td class="w250"> 
       Status 
      </td> 
      <td class="w250"> 
       Ship Type 
      </td> 
     </tr> 
     <tr class="detail" style="display: none"> 
      <td class="w50"> 
       <input type="checkbox" /> 
      </td> 
      <td class="w50"> 
       <input type="button" value="5" class="button2"/> 
      </td> 
      <td class="w250"> 
       Scan 
      </td> 
      <td class="w250"> 
       Status 
      </td> 
      <td class="w250"> 
       Ship Type 
      </td> 
     </tr> 
     <tr class="detail2" style="display: none"> 
      <td class="w50"> 
       <input type="checkbox" /> 
      </td> 
      <td class="w50"> 
       <input type="button" value="6" /> 
      </td> 
      <td class="w250"> 
       Scan 
      </td> 
      <td class="w250"> 
       Status 
      </td> 
      <td class="w250"> 
       Ship Type 
      </td> 
     </tr> 
    </table> 

Answer 1

$(".button").click(function() { 
    $(this).closest("tr").siblings(".detail:first").slideToggle("slow"); 
}); 
$(".button2").click(function() { 
    $(this).closest("tr").siblings(".detail2:first").slideToggle("slow"); 
}); 

這將選擇第一排.detail

你可以在這裏看看http://jsfiddle.net/4KP9Y/2/工作代碼

Answer 2

如果你的按鈕在行裏找到你也許可以做這樣的事情：

$(".button").click(function() { 
    $(this).closest("tr").siblings(".detail2").show() 
}); 

你可能想看看jQuery的功能遍歷DOM。意思是從這裏到達那裏：http://api.jquery.com/category/traversing/