テーブルのフェードインがフェードアウトしていません

Question

以下のコードがうまくいかないのは、他のtrがフェードアウトする必要があります。コードの下

<table class="views-table cols-6 table table-hover table-striped"> 
    <thead> 
    <tr> 
       <th class="views-field views-field-nothing"> 
     Item   </th> 
       <th class="views-field views-field-created"> 
     Payment date   </th> 
       <th class="views-field views-field-commerce-order-total"> 
     Amount   </th> 
       <th class="views-field views-field-status"> 
     Status   </th> 
       <th class="views-field views-field-nothing-1"> 
        </th> 
       <th class="views-field views-field-nothing-2"> 
        </th> 
      </tr> 
</thead> 
<tbody> 
     <tr class="odd views-row-first"> 
       <td class="views-field views-field-nothing"> 
     Access Prestashop online course   </td> 
       <td class="views-field views-field-created"> 
     26 Jan 2017   </td> 
       <td class="views-field views-field-commerce-order-total"> 
     $2.00   </td> 
       <td class="views-field views-field-status"> 
     Shopping cart   </td> 
       <td class="views-field views-field-nothing-1"> 
     <a href="#" class="detailPay">Details</a>   </td> 
       <td class="views-field views-field-nothing-2"> 
     </td></tr><tr class="pay-expand" style="display: none;"> 
       <td colspan="6"> 
       <span class="pay-mode">Payment Method: Offline Payment</span> 
       <span class="pay-mode">Attachment: payment receipt.pdf</span> 
       </td> 
      </tr>   

     <tr class="even"> 
       <td class="views-field views-field-nothing"> 
     Access Test Course   </td> 
       <td class="views-field views-field-created"> 
     28 Mar 2017   </td> 
       <td class="views-field views-field-commerce-order-total"> 
     300.00 QAR   </td> 
       <td class="views-field views-field-status"> 
     Shopping cart   </td> 
       <td class="views-field views-field-nothing-1"> 
     <a href="#" class="detailPay">Details</a>   </td> 
       <td class="views-field views-field-nothing-2"> 
     </td></tr><tr class="pay-expand" style="display: none;"> 
       <td colspan="6"> 
       <span class="pay-mode">Payment Method: Offline Payment</span> 
       <span class="pay-mode">Attachment: payment receipt.pdf</span> 
       </td> 
      </tr>   

     <tr class="odd views-row-last"> 
       <td class="views-field views-field-nothing"> 
     Access Java online Training course   </td> 
       <td class="views-field views-field-created"> 
     07 Apr 2017   </td> 
       <td class="views-field views-field-commerce-order-total"> 
     14,345.00 QAR   </td> 
       <td class="views-field views-field-status"> 
     Pending   </td> 
       <td class="views-field views-field-nothing-1"> 
     <a href="#" class="detailPay">Details</a>   </td> 
       <td class="views-field views-field-nothing-2"> 
     </td></tr><tr class="pay-expand" style="display: table-row;"> 
       <td colspan="6"> 
       <span class="pay-mode">Payment Method: Offline Payment</span> 
       <span class="pay-mode">Attachment: payment receipt.pdf</span> 
       </td> 
      </tr>   

    </tbody> 

$(".pay-expand").hide(); 
$(".detailPay").click(function(){ 
alert(""); 
$('tr.pay-expand').fadeOut(500); 
$(this).closest('tr').next('tr.pay-expand').fadeToggle(500); 
}); 

私はクラスの有料拡張私はクリック持っているだけでフェードを持っている他のTRをフェードアウトする必要があるため機能していません。

Answer 1

現在の要素をフェードアウトするには、$(this)を使用する必要があります。

$(this).next('tr.pay-expand').fadeOut(500);