jquery - jqueryを使用したimg src属性の変更

Question

クリックに基づいて画像を変更しようとしています。同様に、交互のクリックには異なる画像ソースが必要です。スライドトグルのようなもの。一部の人々が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

$(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 2

if の一致をテストしていません。また、 .prop()notにも使用.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");
        }
    });
})