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

attr()返回调用它的jQuery对象（从而提供可链接性）。您似乎认为它会返回一个布尔值，具体取决于属性的值。

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

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

Answer 4

我已经制作了一个jsfiddle ...适合你this ???

SlideToggle函数上的Jquery图像更改

4 个答案: