基于滑动切换函数的Jquery图像更改

我有一个函数，它是一个div的onclick。我想更改标题旁边的箭头图像，在单击时打开和关闭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">

位置

需要

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

attr（）

返回调用它的jQuery对象（从而提供可链接性）。您似乎认为它根据属性的值返回布尔值

但是，可能根本不需要测试属性值。尝试以下方法：

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

---

约瑟夫给出了你的答案，同时也考虑了下面的代码改进：

$("#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')
    );
});

---

更紧凑

我做了一个jsfiddle。。。对你有用吗？

我感谢你的帮助。我使用了以下内容：与我下面的评论相同，它从下到右替换了最初的图像，但它不会返回，我得到了完美的效果。非常感谢。如果我不将新的aspx文件上传到images文件夹，这会很有帮助：$Kevin，如果这对你有帮助，请对帖子进行投票，并通过左边的复选标记将其标记为答案。谢谢你，我很感谢你的意见。我使用了以下命令：$（“#toggle1”）。单击（函数（）{$（“#内容”）。滑动切换（“快速”）；var down=$（“#图像1”）。attr（'src'）==”图像/arrow#down.gif”；$（“#图像1”）.attr（'src'，$（'image1”）.attr（'src'）。替换（下？'u down？'u down'：'u right'：'u down'））; }); 我得到了同样的结果（图像从下到右改变，但不会再改变），使用CSS也是一个不错的选择。我知道你是怎么做到的，但让我困惑的是，一旦按钮被点击一次，类被更改为btntogleshow，是什么将其更改回btntoglehide？

$("#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')
    );
});