Изменить фоновое изображение div на SlideToggle в повторителе

Question

Изменить фоновое изображение div на SlideToggle в повторителе

0

У меня есть 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')
            );

        });

    });

bunnie 06 окт. 2013, в 07:54

Источник

Теги:

jquery

asp.net

background-image

slidetoggle

repeater

1 ответ

Ещё вопросы

Devraj Gadhavi · Answer 1 · 2013-10-06T08-24-00.000Z

Измените часть jQuery, как показано ниже, так как ваш ImageButton1 получит динамический 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>

Большое спасибо за ваш ответ! Я получаю сообщение об ошибке "Uncaught TypeError: Object [object Object] не имеет метода 'child'"
@bunnie, проверьте этот вопрос, чтобы помочь вам решить эту ошибку. Возможно, вы пропустили знак $ .