在数据列表中切换 Div 标签

Question

<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。当我单击具有类名 ntitle 的第一个 div 时，它不会切换具有类“ncontent”的下一个 div 标签。

Answer 1

jQuery next 函数找到紧随其后的元素兄弟（或者如果选择器被传递的话）并且这里你的ncontent div 不是ntitle 的兄弟。此外，由于它是一个DataList 控件，它会动态地重复。所以在这里你可以找到父row（由DataList控件渲染）并将其作为上下文来查找ncontent div。这将按预期工作：-

$(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
    });
});