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 选择器作用于 sets 元素。您需要在单击事件处理程序中优化选择器，使其仅适用于 one 所需的元素。像这样的东西（大约）应该可以工作：

$('.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', ...) 来自动将您的事件处理程序绑定到页面加载后添加的元素。