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对象

jQuery图像交换if-else语句不起作用

4 个答案: