SlideToggle功能上的Jquery图像更改

Question

我有一个 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">

Answer 1

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

需要

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

Answer 2

Joseph 给了你你的答案，但也考虑以下代码改进：

$("#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... 适合你的东西，比如 this???

Answer 4

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

但是，也许您根本不需要测试属性值。尝试类似：

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