在中繼器中的SlideToggle上更改div背景圖像

Question

我有一個ItemTemplate，其中我正在使用SlideToggle顯示/隱藏內容。 我想在SlideToggle時更改圖像（向上/向下箭頭）。 請查看下面的代碼：由於某種原因，當我使用replace方法時，圖像不會更改，並且SlideToggle也不起作用。 有人可以建議一種正確的方法來做到這一點。

<ItemTemplate> 
<div class="memData">

   <div id="blueBar">
       <div id="Title"><%# Eval("title") %> </div>

       <asp:ImageButton style="margin-left:420px;" ID="ImageButton1" width="60" Height="60" ImageUrl="~/Content/images/down_arrow_white.png" runat="server" />

    </div>

    <div id="Description" style="display:none;" >
        <p> <%# Item.Description %></p>
     </div>
</div>
</ItemTemplate> 

這是我正在使用的jQuery：

<script type="text/javascript">
    $(document).ready(function () {


        $('[id*="blueBar"]').click(function () {

            $(this).next().slideToggle("slow");


            var down = $("#ImageButton1").attr('src') == "~/Content/images/down_arrow_white.png"

            $("#ImageButton1").attr(
                'src',
                $("#ImageButton1").attr('src').replace(down ? 'down_arrow_white' : 'up_arrow_white', down ? 'up_arrow_white' : 'down_arrow_white')
            );

        });

    });

Answer 1

如下所示修改jQuery部分，因為當ASP.net呈現頁面時，ImageButton1將獲得動態ID 。

<script type="text/javascript">
    $(document).ready(function () {
        $('[id*="blueBar"]').click(function () {
            $(this).next().slideToggle("slow");

            //findng the image button id from the repeater row 
            var imageButtonID = $(this).child().find('[id$=ImageButton1]').attr('id');

            var down = $("#" + imageButtonID).attr('src') == "~/Content/images/down_arrow_white.png";

            $("#" + imageButtonID).attr(
                'src',
                $("#" + imageButtonID).attr('src').replace(down ? 'down_arrow_white' : 'up_arrow_white', down ? 'up_arrow_white' : 'down_arrow_white')
            );

        });

    });
<script>