jquery動態切換問題

Question

我寫了這個jquery切換每個塊。但是當你切換一個時，其餘的也切換。

我怎樣才能動態地切換（顯示/隱藏）每個塊獨立，所以當我切換到一個部分它不切換其他部分。

注：我不能重命名該塊的每個類，因爲它被動態克隆。

感謝

$(document).ready(function() { 
    $('.alternatepayee-b').hide(); 

    $('.alternatepayee-checkbox').click(function() { 
    $('.alternatepayee-b').slideToggle("slow");  
    });  
}); 

標記：

<div class="alternatepayee-checkbox clearfix"> 
    <input type="checkbox" value="y" name="subscribe" id="checkbox_4"> 
    <label class="foreign" for="checkbox_4" >Alternate Payee</label> 
</div> 
<div class="alternatepayee-b clearfix" >     
    <label class="field-accoundtid arrow">Account ID 
    <input type="text" name="accountid" value="" /></label> 
    <label class="field-first arrow" >First Name 
    <input type="text" name="first_name" value="" /></label> 
    <label class="field-last arrow">Last Name 
    <input type="text" name="last_name" value="" /></label>   
</div> 

<!-- 2nd block --> 
<div class="alternatepayee-checkbox clearfix"> 
    <input type="checkbox" value="y" name="subscribe" id="checkbox_4"> 
    <label class="foreign" for="checkbox_4" >Alternate Payee</label> 
</div> 
<div class="alternatepayee-b clearfix" >    
    <label class="field-accoundtid arrow">Account ID 
    <input type="text" name="accountid" value="" /></label> 
    <label class="field-first arrow" >First Name 
    <input type="text" name="first_name" value="" /></label> 
    <label class="field-last arrow">Last Name 
    <input type="text" name="last_name" value="" /></label>   
</div> 

Answer 1

jQuery選擇上組元素工作。您需要細化click事件處理程序中的選擇器，以便它只適用於所需元素的一個。東西（約）像這應該工作：

$('.alternatepayee-checkbox').click(function() { 
    // 'this' refers to the single checkbox div that was actually clicked 
    // next looks for the next sibling that matches '.alternatepayee-b' 
    $(this).next('.alternatepayee-b').slideToggle("slow"); 
}); 

你用什麼來.next將根據您的標記不同，但是一般的想法。另外，如果要動態添加這些內容，則可以使用.live('click', ...)來自動將事件處理程序綁定到頁面加載後添加的元素。