切换具有相同的类名

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/