在中继器中调用 JQuery 函数

Calling JQuery function inside repeater

本文关键字：JQuery 函数 调用 中继器      更新时间：2023-09-26

在中继器中调用jquery函数.我想在单击链接按钮时切换div的问题.我认为在这种情况下不是第一个jquery函数使用。我认为还有div 和链接按钮之间表格中的探针.

function toggleMe() {
        $(function () {
            $('.toggler').on('click', function (ev) {
                $(this).next('.dataContentSection').toggle();
            });
        });
        }

<div id="repeater"><div class="dataContentSection">
    <div>Name</div>
</div>
        <table>
            <tr>
                <td>
                  <asp:LinkButton  class="titleText toggler" OnClientClick="javascript:toggleMe(); return false;"  runat="server">+ Address details</asp:LinkButton>
                    <asp:Label ID="Label1" runat="server" Text="Welcome"></asp:Label>
                </td>
            </tr>
        </table>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
<div class="dataContentSection">
    <div>Name</div>
</div>
        <table>
            <tr>
                <td>
                  <asp:LinkButton  class="titleText toggler" OnClientClick="javascript:toggleMe(); return false;"  runat="server">+ Address details</asp:LinkButton>
                    <asp:Label ID="Label2" runat="server" Text="Welcome"></asp:Label>
                </td>
            </tr>
        </table>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
<div class="dataContentSection">
    <div>Name</div>
</div>
        <table>
            <tr>
                <td>
                  <asp:LinkButton  class="titleText toggler" OnClientClick="javascript:toggleMe(); return false;"  runat="server">+ Address details</asp:LinkButton>
                    <asp:Label ID="Label3" runat="server" Text="Welcome"></asp:Label>
                </td>
            </tr>
        </table>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
<div class="dataContentSection">
    <div>Name</div>
</div>
        <table>
            <tr>
                <td>
                  <asp:LinkButton  class="titleText toggler" OnClientClick="javascript:toggleMe(); return false;"  runat="server">+ Address details</asp:LinkButton>
                    <asp:Label ID="Label4" runat="server" Text="Welcome"></asp:Label>
                </td>
            </tr>
        </table>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
<div class="dataContentSection">
    <div>Name</div>
</div>
        <table>
            <tr>
                <td>
                  <asp:LinkButton  class="titleText toggler" OnClientClick="javascript:toggleMe(); return false;"  runat="server">+ Address details</asp:LinkButton>
                    <asp:Label ID="Label5" runat="server" Text="Welcome"></asp:Label>
                </td>
            </tr>
        </table>
<div class="dataContentSection" style="display: none;">
    <div>Address Line 1:</div>
    <div>Address Line 2:</div>
    <div>Address Line 3:</div>
</div>
</div>

问题是toggleMe()函数。如果你想切换div，你需要做这样的事情：-

  $(function () {
        $('.toggler').click(function (ev) {
            $(".dataContentSection").toggle();
            $(this).next('.dataContentSection').toggle();
        });
    });

希望这有帮助。

相关文章：