1

リピーターを使用してページにデータを表示していますが、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を含めてみましたが、機能しますが、明らかに最初の5つのリピーター項目に対してのみです。

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

もちろん、リピーター内に折りたたみ可能なコンテンツを含めるという同じ目標を達成するために、別のアプローチを受け入れることもできます。

4

3 に答える 3

3

これを行う最も簡単な方法は、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/

于 2012-12-12T14:15:54.287 に答える
1

簡単な方法は、IDセレクターではなくクラスを使用することです。これはスターターとして機能するはずです：

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

次に、リンクごとにイベントを作成するのではなく、委任を使用するようにイベントリスナーを最適化します。

于 2012-12-12T14:05:12.960 に答える
0

このコードはあなたに役立つと思います。すべての「.dataContentSection」アイテムを非表示にしてから、ターゲットitemTemplate内の「.dataContentSection」要素を開くだけです。

$(function () {
  $('a.titleText').on('click', function (ev) {
$(".dataContentSection").each(function(){
$(this.hide();
});
    $(this).next('div').toggle();
  });
});
于 2012-12-12T14:39:27.617 に答える