jquery - 在中继器项目上使用 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”添加到 anchor 标记中。

然后将其用于您的脚本:

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

执行此脚本时，它将事件处理程序绑定(bind)到类名为“toggler”的所有 anchor 元素。事件处理程序在执行时，只需调用单个元素的 DIV 同级元素上的 jQuery toggle() 方法即可。

这是一个完整的 JS fiddle :http://jsfiddle.net/P5tZX/