Question

我正在尝试根据点击更改图片。像交替点击应该有不同的图像源。像slideToggle这样的东西。我看到有些人使用toggleClass，但还有另一种方法可以实现吗？

我的代码如下：

    $(document).ready(function(){
        $("img").click(function(){
            if ($("img").attr("src","down.png"))
            {
                $(this).attr("src","up.png");
            }

            else if ($("img").attr("src","up.png"))
            {
                $(this).attr("src","down.png");
            }
           })

    })

但不幸的是它不会进入else if循环。

Answer 1

您的if条件错误，您需要一个布尔表达式：

if ($("img").attr("src") == "down.png") {
...
} else if ($("img").attr("src") == "up.png") {
..
}

$("img").attr("src","down.png")的原始检查实际上是将图片来源设置为down.png，而不是检查它。

另外，我相信你真的想要这个：

if ($(this).attr("src") == "down.png") {
...
} else if ($(this).attr("src") == "up.png") {
..
}

您的代码只会评估第一张图片的来源（页面上所有图片），此代码会检查所点击图片的来源。

Answer 2

除了其他答案所做的修正之外，您还需要在整个功能中使用$(this)。 $("img").attr("src")将获得页面上第一张图片的src，而不是点击的图片。

$(document).ready(function(){
    $("img").click(function(){

        if ($(this).attr("src") == "down.png") {
            $(this).attr("src","up.png");
        }

        else if ($(this).attr("src") == "up.png") {
            $(this).attr("src","down.png");
        }

    })
})

Answer 3

尝试

$(document).ready(function(){
    $("img").click(function(){
        var t = $(this);
        if (t.attr("src") == "down.png") {
            t.attr("src","up.png");
        }

        else if (t.attr("src") == "up.png") {
            t.attr("src","down.png");
        }

       });
});

我可能会将其简化为

$(document).ready(function(){
     $("img").click(function(){
        var rc =  $(this).attr("src") == "down.png" ? 'up.png' : 'down.png';
         $(this).attr("src", rc);
     });
});

该行转换为类似

的内容

var variable = (if statement true) ? (give value for true) : (give value for false)

然后将该值直接保存在variable

中

Answer 4

您没有测试if中的匹配项，.prop()也使用.attr()而非src。

此外，您需要在点击处理程序中使用$(this)，而不是$('img')。

$(document).ready(function(){
    $("img").click(function(){
        if ($(this).prop("src") == "down.png") {
            $(this).prop("src","up.png");
        } else if ($(this).prop("src") == "up.png") {
            $(this).prop("src","down.png");
        }
    });
})

使用jquery img src属性更改

4 个答案: