jQuery圖像交換if-else語句不起作用

Question

jQuery有問題。

我在$(document).ready(function() {...})內有以下代碼

 $("#one_div").hide();

 $('#button').click(function(){
        if (this.src == 'img/img1.png'){        
            this.src = 'img/img2.png';
        } 
        else {
            this.src = 'img/img1.png';
        }
        $("#one_div").slideToggle(800);
    });

#button是圖像的ID。 one_div是div的ID。

實際上，單擊圖像會切換div，但問題是圖像僅交換了一次，從img1到img2 ，再也沒有切換回去。 我做錯了什么？

Answer 1

你忘了第二個=

(this.src == 'img/img1.png'){   

Answer 2

將代碼放入$(window).load(function() { ... }); 而是在切換圖像之前確保圖像已加載。

$(document).ready(function() {

$("#one_div").hide();

});

$(window).load(function() {
    $('#button').click(function(){
        if ($(this).attr('src') == 'img/img1.png'){        
            $(this).attr('src', 'img/img2.png');
        } 
        else {
            $(this).attr('src', 'img/img1.png');
        }
        $("#one_div").slideToggle(800);
    });
});

Answer 3

為什么不使用類來切換圖像？ 代碼未經測試，但是應該變成這樣：

$("#one_div").hide();

 $('#button').click(function(){
        this.toggleClass('active');
        if (this.hasClass('active')){     
            this.src = 'img/img2.png';
        } else {
            this.src = 'img/img1.png';
        }
        $("#one_div").slideToggle(800);
    });

Answer 4

嘗試這個：

 $('#button').click(function(){
    var el = document.getElementById('button');
    if (el.src == 'img/img1.png'){        
        el.src = 'img/img2.png';
    } 
    else {
        el.src = 'img/img1.png';
    }
    $("#one_div").slideToggle(800);
});

我認為這返回了一個JQUERY對象，而不是可以使用.src進行操作的DOM對象。