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事件处理程序中优化选择器，以便它仅适用于 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', ...)自动将事件处理程序绑定到页面加载后添加的元素。

Jquery动态切换问题

1 个答案: