使用Jquery切换转发器项目

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

这是转发器

  
 
 Name:  
 
 DOB:  
 
 Age:  
 
 + Address details 
 
 Address Line 1:  
 
 >Address Line 2:  
 
 >Address Line 3:  
 
 >Address Line 4:  
 
 
   

基本上我想包含一些像这样的javascript，以便可以为每个转发器项启用切换。 我尝试使用.ClientID，但这在转发器中不起作用。 只是为了certificate它可行，我尝试了包含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(); }); });  

我当然愿意采用不同的方法来实现在转发器中具有可折叠内容的相同目标。

Answer 1

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

 
  
 
Name
 
 + Address details 
 
Address Line 1:
 
Address Line 2:
 
Address Line 3:
 
  
 
Name
 
 + Address details 
 
Address Line 1:
 
Address Line 2:
 
Address Line 3:
 
   

请注意，为简单起见，我删除了ID。 我还将类名’toggler’添加到锚标签中。

然后将此用于您的脚本：

执行此脚本时，它会将事件处理程序绑定到类名为“toggler”的所有锚元素。 事件处理程序在执行时，只是在单个元素的DIV兄弟上调用jQuery toggle（）方法。

这是一个完整的JS小提琴： http ： //jsfiddle.net/P5tZX/

Answer 2

一种快速的方法可能是使用类而不是id选择器。 这应该作为一个起点：

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

然后，我将优化事件侦听器以使用委派，而不是为每个链接创建事件。

Answer 3

我想，这段代码对你有帮助。 它隐藏了所有“.dataContentSection”项，然后只在目标itemTemplate中打开“.dataContentSection”元素。

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