Question

我有一个转发器，里面有一个div和按钮。但正如你所知，在转发器ID中有所改变。像
ctl00_ContentPlaceHolder1_rptToogle_的 ctl00 _btnToogle ctl00_ContentPlaceHolder1_rptToogle_的 ctl01 _btnToogle ctl00_ContentPlaceHolder1_rptToogle_的 ctl02 _btnToogle

该代码正在运行，但它适用于所有人。我的意思是当我点击每个div打开。我只想打开我选择的，而不是全部。我该如何解决？

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $('[id*="divToogle"]').slideToggle(100);
            return false;
        });
    });
</script>

<asp:Repeater id="rptToogle" runat="server">
    <ItemTemplate>
        <asp:Button id="btnToogle" runat="server" Text=""></asp:Button>
        <div id="divToogle" runat="server" style="display:none;">
             asdasd, asdasd, asdasd
        </div>
    </ItemTemplate>
</asp:Repeater>

Answer 1

试试这个......在$(this)

中使用$('[id*="divToogle"]')代替click

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $(this).slideToggle(100);
            return false;
        });
    });
</script>

Answer 2

您正在使用id =“divToggle”创建多个div。从技术上讲，你真的不应该这样做，因为它是无效的标记，让不同的DOM元素具有相同的ID（虽然浏览器会允许它）。

您可以使用$（this）选择当前按钮，然后您可以利用jquery的next（）选择器来获取按钮旁边的div，如下所示：

<script type="text/javascript">
    $(document).ready(function () {
       $('[id*="btnToogle"]').click(function () {
            //select the very next sibling of this button, which we know is the div
            $(this).next().slideToggle(100);
            return false;
        });
    });
</script>

但是请注意，如果你开始编辑你的标记，使用next（）会很危险，因为它是一个相对选择器，而不是绝对的（它获取下一个元素，而不是id的特定元素）。

Answer 3

您可以使用next方法：

$(document).ready(function () {
    $('[id*="btnToogle"]').click(function() {
        $(this).next().slideToggle(100);
        return false;
    });
});

Answer 4

USE rptToogle_ItemBound方法＆amp;按照以下示例修改代码

    protected void rptToogle_ItemBound(Object Sender, RepeaterItemEventArgs e)
    {
        try
        {
        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
        {
            DataRowView drv = (DataRowView)e.Item.DataItem;
            int year = Convert.ToInt32(drv["Year"]);
            Panel pnl = (Panel)e.Item.FindControl("pnlToggle");
        // Your code

        }
            }
        catch (Exception ex)
        {
            throw ;
        }
    }


    <asp:Repeater id="rptToogle" runat="server" OnItemDataBound="rptToggle_ItemBound">
        <ItemTemplate>
            <asp:Button id="btnToogle" runat="server" Text=""></asp:Button>
               <asp:Panel ID="pnlToggle" runat="server" Visible="false">

                 //Use Panel as this also need unique ID for your code to work properly
                </asp:Panel>

        </ItemTemplate>
    </asp:Repeater>

修改脚本，这将生成唯一的按钮ID＆amp;将仅为特定按钮事件启动脚本

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= btnToogle.ClientID %>").click(function () {
            $("#<%= pnlToogle.ClientID %>").slideToggle(100);
            return false;
        });
    });
</script>

为什么我要用转发器切换问题？

4 个答案: