1

我有一个中继器，里面有一个 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>
4

4 回答 4

3

试试这个......使用$(this)而不是在$('[id*="divToogle"]')里面click

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="btnToogle"]').click(function () {
            $(this).slideToggle(100);
            return false;
        });
    });
</script>
于 2012-09-10T11:49:56.063 回答
2

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

您可以使用 $(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 获取特定元素）。

于 2012-09-10T11:59:34.983 回答
1

您可以使用next方法：

$(document).ready(function () {
    $('[id*="btnToogle"]').click(function() {
        $(this).next().slideToggle(100);
        return false;
    });
});
于 2012-09-10T11:50:21.253 回答
0

使用 rptToogle_ItemBound 方法并按照以下示例修改您的代码

    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 并仅针对特定按钮事件启动脚本

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= btnToogle.ClientID %>").click(function () {
            $("#<%= pnlToogle.ClientID %>").slideToggle(100);
            return false;
        });
    });
</script>
于 2012-09-10T11:49:54.063 回答