1

リピーターがあり、その中に div とボタンがあります。しかし、ご存知のように、リピーター ID が変更されます。ctl00_ContentPlaceHolder1_rptToogle_ctl00_btnToogle
ctl00_ContentPlaceHolder1_rptToogle_ctl01_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 に答える