使用jQuery的中继器项目切换(Use Jquery toggle on repeater ite

我使用的中继器在我的网页上显示的数据，我想用一个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的切换（）方法。

下面是一个完整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();
  });
});

文章来源: Use Jquery toggle on repeater items