Question

我有两个坐在转发器内的div。基本上div的类名是根据函数返回后的代码设置的。但是，我希望能够在我的javascript中引用这些div，我不确定如何做。

 <asp:Repeater ID="rptdivisions" runat="server">
                    <ItemTemplate>
                        <div class='<%# getDivHeaderClass(Eval("Division").ToString())%>'>
                           <%# Eval("Division")%>
                        </div>
                        <div class='<%# getDivMainClass(Eval("Division").ToString())%>'>
                            <br />
                            <dx:ASPxGridView ID="gvrecords" runat="server" ClientInstanceName="gvCentral" AutoGenerateColumns="False" OnHtmlDataCellPrepared="gvrecords_HtmlDataCellPrepared">
                                <Columns>
                                    <dx:GridViewDataTextColumn Caption="Product Code " VisibleIndex="0" FieldName="code"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Description" VisibleIndex="1" FieldName="description"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Packsize" VisibleIndex="2" FieldName="packSize"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Barcode" VisibleIndex="3" FieldName="barcodeUnit"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Expiry Date" VisibleIndex="4" FieldName="ExpiryDate"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Quantity" VisibleIndex="5" FieldName="packQuantity"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Zone ID" VisibleIndex="6" FieldName="ZoneID"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Location ID" VisibleIndex="7" FieldName="LocationID"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Date Recorded" VisibleIndex="8" FieldName="DateRecorded"></dx:GridViewDataTextColumn>
                                    <dx:GridViewDataTextColumn Caption="Average WK Sales" VisibleIndex="9" FieldName="AverageWkSales"></dx:GridViewDataTextColumn>
                                </Columns>
                                <ClientSideEvents EndCallback="function(s, e){Dcs.load()}" />
                                <SettingsText Title="Central" />
                            </dx:ASPxGridView>
                        </div>
                        <br />
                    </ItemTemplate>
                </asp:Repeater>

Javascript是：

    $(function () {
        $(document).on('click', '.headerdiv', function () {
            $(".maindiv").toggle("slow");
        });
    });

Answer 1

在div中添加一个额外的类并引用它。

以下是一个示例:(类名后的空格很重要）

<div class='<%# "header_class " + getDivHeaderClass(Eval("Division").ToString())%>'>
    <%# Eval("Division")%>
</div>
<div class='<%# "main_class " + getDivMainClass(Eval("Division").ToString())%>'>

然后在你的js：

$(function () {
    $(document).on('click', '.header_class', function () {
        $(this).siblings('.main_class').toggle('slow');
    });
});

编辑：

正如OP所评论的那样，只有当模板中的每个项目都被div包围时，这才有效。如果您没有包装每个项目的div，以下代码将适用于您：

$(function () {
    $(document).on('click', '.header_class', function () {
        $(this).nextAll('.main_class').first().toggle('slow');
    });
});

注意：我使用$(this).nextAll('.main_class').first().toggle('slow');，因为它对普通用户更可靠。如果你的div总是彼此相邻而中间没有任何元素，那么你可以简单地使用$(this).next().toggle('slow');。如果您使用较短的版本并稍后更改您的布局，它将会中断。

Answer 2

您需要调用您的函数

$(function () {
    $(document).on('click', '.headerdiv', function () {
        $(".maindiv").toggle("slow");
    });
})();

在jquery中调用由函数后面的代码设置的div类

2 个答案: