Javascript 在数据列表中切换Div标记

-

`在这里输入代码` $（“div.ntitle”）。单击（函数（）{ 调试器； //$（this）.closest（'div'）.next（'.ncontent'）.slideToggle（）； $（this.next（'.ncontent'）.slideToggle（）； }); 我有一个带有两个div标签的数据列表。我用javascript编写代码，用于单击一个div，它将切换相关的下一个div。当我单击类名为ntitle的第一个div时，它不会切换类为“ncontent”的下一个div标记。

jQuery函数将查找紧跟其后的元素同级（或者如果传递了选择器，则查找该同级）在这里，您的

ncontent

div不是

ntitle

的兄弟。此外，由于它是一个

DataList

控件，因此它将动态地重复自身。因此，您可以在这里找到父

行

（由DataList控件呈现），并将其用作查找

ncontent

div的上下文。这将按预期工作：-

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

jQuery函数查找紧跟其后的元素的同级（或者如果传递了选择器，则查找该同级），这里您的

ncontent

div不是

ntitle

的同级。此外，由于它是一个

DataList

控件，因此它将动态地重复自身。因此，您可以在这里找到父

行

（由DataList控件呈现），并将其用作查找

ncontent

div的上下文。这将按预期工作：-

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

---

如果你点击类名为ntitle的div，它会切换下一个包含n类内容的div标签吗？是的。我想在点击上切换下一个div n内容。你可以使用这个链接作为参考吗？有这样10条记录正在从数据库中提取。我只想用类名为“ncontent”的相关div进行切换。我只看到了这个链接。有多种解释。我以前试过一些。但不起作用。单击类名为ntitle的div时，它应该切换下一个包含n类内容的div标记吗？是的。我想在点击上切换下一个div n内容。你可以使用这个链接作为参考吗？有这样10条记录正在从数据库中提取。我只想用类名为“ncontent”的相关div进行切换。我只看到了这个链接。有多种解释。我以前试过一些。但不起作用。关于这一点的一个疑问是，我没有写任何“表”或“tr”，那么这段代码如何在这里找到父级“tr”。@vipul-嘿，这就是我在回答中写的，ASP.NET

DataList

控件呈现为html表。只要在页面加载后检查页面源代码，你就会明白。关于这一点的一个疑问是，我没有写任何“表”或“tr”，那么这段代码如何在这里找到父级“tr”。@vipul-嘿，这就是我在回答中写的，ASP.NET

DataList

控件呈现为html表。只要在页面加载后检查页面源代码，你就会明白。