Question

我只是尝试使用JQuery点击来切换图像源。我的脚本在下面，我不知道为什么它不会切换。首次加载页面时，如果单击灰色图像，则会切换到彩色图像。但如果你点击灰色图像，没有任何反应。所以它在第一次点击时会发生变化，但如果您在第一次点击后点击则没有任何反应。

<script type="text/javascript">
    $(document).ready(function () {
        $('#imageid').click(function () {
            if ($(this).attr('src', 'imagegray.png')) {
                $(this).attr('src', 'imagecolor.png');
            }
            else if ($(this).attr('src', 'imagecolor.png')) {
                $(this).attr('src', 'imagegray.png');
            }
        })
    });
</script>

Answer 1

您需要比较src属性。目前，您正在设置if条件块

 $('#imageid').click(function () {
     if ($(this).attr('src') === 'imagegray.png') {
         $(this).attr('src', 'imagecolor.png');
     }
     else if ($(this).attr('src') === 'imagecolor.png') {
         $(this).attr('src', 'imagegray.png');
     }
 })

Answer 2

您需要获取图片的源值，然后将其与您想要的预期名称进行比较，目前您做错了，将代码更改为：

$('#imageid').click(function () {
    if ($(this).attr('src') == 'imagegray.png') {
        $(this).attr('src', 'imagecolor.png');
    }
    else if ($(this).attr('src') == 'imagecolor.png') {
        $(this).attr('src', 'imagegray.png');
    }
})

<强> Fiddle Demo

Answer 3

其他建议将达到您想要的效果，但我相信如果您使用类

，它会变得更好

例如，您的图片将始终具有active类，当您单击时将插入/删除inactive类：

$(this).toogleClass('inactive');

Answer 4

以同样的方式完成同样的事情。它们都做同样的事情，具有不同程度的紧凑性。

最后一个可能是最方便和最灵活的。您永远不必触摸您的JavaScript来更改图片src值。

http://jsfiddle.net/yPAqY/

HTML：

<img id="imageid" src="imagegray.png" alt="">

jQuery的：

$(document).ready(function () {

    $('#imageid').on("click", function () {

        var obj = $(this),
            objAttr = obj.attr('src'),
            first_img = 'imagegray.png',
            second_img = 'imagecolor.png';

        if (objAttr === first_img) {
            obj.attr('src', second_img);
        } else if (objAttr === second_img) {
            obj.attr('src', first_img);
        }

    });

});

http://jsfiddle.net/yPAqY/1

HTML：

<img id="imageid" src="imagegray.png" alt="">

jQuery的：

$(document).ready(function() {

    $('#imageid').on("click", function() {

        var obj = $(this),

            first_img = 'imagegray.png',
            second_img = 'imagecolor.png',

            imgs = obj.attr('src') == first_img ? second_img : first_img;

        obj.attr('src', imgs);

    });

});

http://jsfiddle.net/yPAqY/2/

Html：

<img id="imageid" src="imagegray.png" data-img2="imagecolor.png" alt="">

jQuery的：

$(document).ready(function() {

    var image = $('#imageid'),
        imageSrc = image.attr('src'),
        imageData = image.data('img2');

    image
        .removeAttr('data-img2')
        .on("click", function() {

            var obj = $(this),
                imgs = obj.attr('src') == imageSrc ? imageData : imageSrc;

            obj.attr('src', imgs);

        });

});

Answer 5

将两张图片放在单独的班级

中

并切换课程，你可以看到效果

JQuery Toggle Image无效

5 个答案: