使用jQuery的中继器项目切换 [英] Use Jquery toggle on repeater items

问题描述

我使用的直放站我的网页上显示的数据，我想用一个jquery切换显示/隐藏地址栏，使页面更加人性化。

I am displaying data on my page using repeater and I'd like to use a jquery toggle to show/hide the address fields to make the page more user friendly.

下面是转发

<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和它仅用于第一个五年直放站项目的工作，但效果显着。

Essentially I want to include some javascript like this so that the toggling can be enabled for each repeater item. I tried using .ClientID but this did not work inside the repeater. Just to prove it would work I have tried including the javascript, and it does work but obviously only for the first five repeater items.

<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>

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

I am of course open to a different approach to achieve the same goal of having the collapsible content inside the repeater.

推荐答案

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

The easiest way to do this is to not use ID's, rather use class names for your selectors. As an example, here is some HTML based from your code:

<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'到锚标记。

Notice I removed the ID's for simplicity. I also added the class name 'toggler' to the anchor tags.

然后用这个为你的脚本：

Then use this for your script:

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

在执行这个脚本，它结合事件处理程序与类名toggler所有的锚元素。事件处理程序，在执行时，简单地呼吁各个元素的DIV兄弟jQuery的切换（）方法。

When this script is executed, it binds an event handler to all anchor elements with the class name 'toggler'. The event handler, when executed, simply calls the jQuery toggle() method on the individual element's DIV sibling.

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

Here is a complete JS fiddle: http://jsfiddle.net/P5tZX/

这篇关于使用jQuery的中继器项目切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！