Изменение изображения Jquery в функции SlideToggle

Question

У меня есть функция, которая является кнопкой мыши для div. Я хочу изменить изображение стрелки рядом с заголовком, который открывается и закрывает div при нажатии. У меня есть записанная функция, и она будет работать, чтобы изменить изображение вниз (по умолчанию) вправо, но оно не изменит его обратно

Вот Javascript:

$("#toggle1").click(function () {
    $("#content").slideToggle("fast");

    if ($("#image1").attr('src', "images/arrow_down.gif")) {
        $("#image1").attr(
            'src', 
            $("#image1").attr('src').replace('_down', '_right')
        );
    } else {
        $("#image1").attr(
            'src', 
            $("#image1").attr('src').replace('_right', '_down')
        );
    }
});

Вот HTML:

<div style="text-align:center;"><a class="header" id="toggle1">Location</a>
<img id="image1" src="images/arrow_down.gif" alt="" />          
<div id="content">

Answer 1

if ($("#image1").attr('src', "images/arrow_down.gif"))

должно быть

if ($("#image1").attr('src') == "images/arrow_down.gif")

Answer 2

Джозеф дал вам ваш ответ, но также подумайте о следующем улучшении кода:

$("#toggle1").click(function () {
    $("#content").slideToggle("fast");

    var down = $("#image1").attr('src') == "images/arrow_down.gif"

    $("#image1").attr(
        'src', 
        $("#image1").attr('src').replace(down ? '_down' : '_right', down ? '_right' : '_down')
    );
});

Гораздо компактнее!

Answer 3

Я сделал jsfiddle ... работает для вас что-то вроде это ???

Answer 4

attr() возвращает объект jQuery, для которого он был вызван (тем самым обеспечивая цепочку).Вы, кажется, думаете, что он возвращает логическое значение в зависимости от значения атрибута.

Однако, возможно, вам вообще не нужно проверять значение атрибута.Попробуйте что-то вроде:

$("#toggle1").click(function() {
    var $content = $("#content");
    $("#image1").attr("src", "images/arrow_"
        + ($content.is(":visible") ? "down" : "right") + ".gif");
    $content.slideToggle("fast");
});