使用Jquery切换中继器项目

Question

我正在使用中继器在我的页面上显示数据，我想使用jQuery切换显示/隐藏地址字段以使页面更加用户友好。

这里是中继

<asp:Repeater ID="RepeaterPersonBasicData" runat="server"> 
<ItemTemplate> 
<div id="Maindetails" class="dataContentSection" runat="server"> 
    <div id="Div1" visible="true" runat="server"> 
     <span id="Span1" class="dataFieldText" runat="server">Name:</span> 
     <span id="Span1444" runat="server"><%# Eval("Name")%></span> 
    </div> 
    <div id="Div2" visible="true" runat="server"> 
     <span id="Span3" class="dataFieldText" runat="server">DOB:</span> 
     <span id="Span1443" runat="server"><%# Eval("DOB")%></span> 
    </div> 
    <div id="Div3" visible="true" runat="server"> 
     <span id="Span5" class="dataFieldText" runat="server">Age:</span> 
     <span id="Span1442" runat="server"><%# Eval("Age")%></span> 
    </div> 
</div> 
<a href="javascript:void(0);" id="toggleAddressdetails" class="titleText" runat="server">+ Address details</a> 
<div id="Addressdetails" class="dataContentSection" runat="server" style="display: none;"> 
    <div id="Div78" visible="true" runat="server"> 
     <span id="Span144" class="dataFieldText" runat="server">Address Line 1:</span> 
     <span id="Span246" runat="server"><%# Eval("Address1")%></span> 
    </div> 
    <div id="Div80" visible="true" runat="server"> 
     <span id="Span148" class="dataFieldText" runat="server">>Address Line 2:</span> 
     <span id="Span147" runat="server"><%# Eval("Address2")%></span> 
    </div> 
    <div id="Div82" visible="true" runat="server"> 
     <span id="Span152" class="dataFieldText" runat="server">>Address Line 3:</span> 
     <span id="Span151" runat="server"><%# Eval("Address3")%></span> 
    </div> 
    <div id="Div84" visible="true" runat="server"> 
     <span id="Span156" class="dataFieldText" runat="server">>Address Line 4:</span> 
     <span id="Span155" runat="server"><%# Eval("Address4")%></span> 
    </div> 
</div> 

<br /> 
</ItemTemplate> 
</asp:Repeater> 

基本上我想包括一些JavaScript这样的，这样的触发可以为每个转发器项目被启用。我尝试使用.ClientID，但这在中继器内不起作用。 只是为了证明它会工作我已经尝试了包括javascript，它确实工作，但显然只为前五个中继器项目。

<script type="text/javascript"> 
    $(function() { 
     $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl00_toggleAddressdetails').click(function() { 
      $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl00_Addressdetails').toggle(); 
     }); 
    }); 
    $(function() { 
     $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl01_toggleAddressdetails').click(function() { 
      $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl01_Addressdetails').toggle(); 
     }); 
    }); 
    $(function() { 
     $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl02_toggleAddressdetails').click(function() { 
      $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl02_Addressdetails').toggle(); 
     }); 
    }); 
    $(function() { 
     $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl03_toggleAddressdetails').click(function() { 
      $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl03_Addressdetails').toggle(); 
     }); 
    }); 
    $(function() { 
     $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl04_toggleAddressdetails').click(function() { 
      $('#ctl00_cphBody_ctl00_ctl00_RepeaterPersonBasicData_ctl04_Addressdetails').toggle(); 
     }); 
    }); 
</script> 

我当然可以打开不同的方法来实现中继器内可折叠内容的相同目标。

Answer 1

最简单的方法是不使用ID，而是使用类名称作为选择器。作为一个例子，这里是从你的代码基于一些HTML：

<div id="repeater"> 
<!-- item 1 --> 
<div class="dataContentSection"> 
    <div>Name</div> 
</div> 
<a href="javascript:void(0);" class="titleText toggler">+ Address details</a> 
<div class="dataContentSection" style="display: none;"> 
    <div>Address Line 1:</div> 
    <div>Address Line 2:</div> 
    <div>Address Line 3:</div> 
</div> 
<!-- item 2 --> 
<div class="dataContentSection"> 
    <div>Name</div> 
</div> 
<a href="javascript:void(0);" class="titleText toggler">+ Address details</a> 
<div class="dataContentSection" style="display: none;"> 
    <div>Address Line 1:</div> 
    <div>Address Line 2:</div> 
    <div>Address Line 3:</div> 
</div> 
<!-- etc --> 
</div> 

通知我删除了的ID为简单起见。我还将类名'toggler'添加到了锚标签。

然后用这个脚本：

<script type="text/javascript"> 
$(function() { 
    $('a.toggler').on('click', function() { 
     $('+ div', this).toggle(); 
    }); 
}); 
</script> 

在执行这个脚本，它结合事件处理程序与类名“toggler”所有的锚元素。事件处理程序在执行时只需在各个元素的DIV同级中调用jQuery toggle（）方法。

下面是一个完整JS提琴：http://jsfiddle.net/P5tZX/

Answer 2

快速的方法可能是使用类而不是id选择器。这应该作为首发：

$(function() { 
    $('a.titleText').on('click', function (ev) { 
    $(this).next('div').toggle(); 
    }); 
}); 

我会再优化事件侦听器使用delegation而不是创建每个链路的事件。

Answer 3

我认为，这个代码是对你有帮助。它隐藏了所有“.dataContentSection”项目，然后在目标itemTemplate内打开“.dataContentSection”元素。

$(function() { 
    $('a.titleText').on('click', function (ev) { 
$(".dataContentSection").each(function(){ 
$(this.hide(); 
}); 
    $(this).next('div').toggle(); 
    }); 
});