在数据列表中切换Div标签

Toggle Div tag inside a datalist

本文关键字：Div 标签 数据 列表      更新时间：2023-09-26
<asp:DataList ID="dlDataList" runat="server">
        <ItemTemplate>
            <p>
                <h4>
                    <div class="ntitle" id='<%# Eval("Email_ID") %>'>
                        <asp:Label ID="Label30" runat="server" Text='<% #Eval("Departure_Country") %>'></asp:Label>
                        -
                        <asp:Label ID="Label31" runat="server" Text='<% #Eval("Arrival_Country") %>'></asp:Label>
                    </div>
                </h4>
            </p>
            <div class="ncontent" id='d<%# Eval("Email_ID") %>'>
                <asp:Label ID="Label32" runat="server" Text="Company Name" Width="250px"></asp:Label>
                <asp:Label ID="Label33" runat="server" Text='<% #Eval("comp_name") %>'></asp:Label>
                <br />
                <asp:Label ID="Label34" runat="server" Text="Contact Person" Width="250px"></asp:Label>
                <asp:Label ID="Label35" runat="server" Text='<% #Eval("contact_person") %>'></asp:Label>
                <br />
                `enter code here`
            </div>
            <script language="JavaScript" type="text/javascript">
                $("div.ntitle").click(function () {
                    debugger;
                    // $(this).closest('div').next('.ncontent').slideToggle();
                    $(this).next('.ncontent').slideToggle();
                });
            </script>

我有一个带有两个div标签的数据列表。我写的代码在javascript点击一个div它切换相关的下一个div。当我点击第一个div与类名称ntitle它不切换下一个div标签与类"ncontent"。

jQuery next函数查找紧跟元素的兄弟姐妹(或如果选择器传递)，这里您的ncontentdiv不是ntitle的兄弟姐妹。另外，由于它是一个DataList控制，它将动态地重复自己。因此，在这里您可以找到父row(由DataList控件呈现)并将其用作查找ncontentdiv的上下文。这将按预期工作:-

$(document).ready(function () {
    $(".ntitle").click(function () {
         var parentRow = ($(this).parents('tr')); //find the parent row
         $('div.ncontent', parentRow).slideToggle(); //find ncontent div inside that row
    });
});
相关文章：