jQuery的顯示/隱藏一個項目只在一個頁面

Question

我的問題是，我有while循環，它列出了球隊的結果被用PHP加載到頁面從MySQL數據庫中的一些表中的數據。在這個循環有是被默認使用的一類「得分手」的隱藏錶行，有那麼一個顯示/隱藏按鈕，說天氣顯示或隱藏該行。

但「射手」級頁面上多次因爲有多個結果，所以如果你打的顯示/隱藏按鈕，它會打開所有的細胞與類「得分手」的。

示例代碼是在這裏：http://codepen.io/anthwinter/pen/vLJiy

我需要能夠只顯示/隱藏只有結果目前的得分手。我最好的辦法是什麼？

在此先感謝

HTML：

<table> 
    <tr> 
     <td><h1>One</h1></td> 
    </tr> 
    <tr> 
     <td><a href="#" class="showHide">show/hide</a></td> 
    </tr> 
    <tr> 
     <td class="scorers">Show or hide this content one</td> 
    </tr> 
    <tr> 
     <td><h1>Two</h1></td> 
    </tr> 
    <tr> 
     <td><a href="#" class="showHide">show/hide</a></td> 
    </tr> 
    <tr> 
     <td class="scorers">Show or hide this content two</td> 
    </tr> 
</table> 

JQ：

$(document).ready(function() { 
    $(".scorers").hide(); 

    $(".showHide").click(function(event) { 
     event.preventDefault(); 
     $(".scorers").toggle("fast"); 
    }); 
}); 

Answer 1

通過只是在做$('.scorers').toggle("fast");將針對所有.scorers TD元素， 您需要點的使用this比做一些DOM遍歷點擊一個：

$(document).ready(function() { 
    $(".scorers").hide(); 

    $(".showHide").click(function(event) { 
     event.preventDefault(); 
     $(this).closest('tr').next().find('.scorers').toggle("fast"); 
    }); 
}); 

http://api.jquery.com/closest/
http://api.jquery.com/next/
http://api.jquery.com/find/

Answer 2

使用

$(this).closest('TR').next().find('.scorers').toggle("fast");