jquery - 在中继器中更改 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 部分，因为ID当页面由ASP.net.

<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>