JQuery切换图像不起作用答案

【问题标题】：JQuery Toggle Image not workingJQuery切换图像不起作用
【发布时间】：2014-01-24 18:24:52
【问题描述】：

我只是尝试使用 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>

【问题讨论】：

标签： jquery jquery-click-event jquery-attributes

【解决方案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');
     }
 })

【讨论】：

成功了！！我没有注意到 set vs compare 问题。谢谢！

【解决方案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

【讨论】：

是的，这就是问题所在。你和 Satpal 的答案是一样的。感谢您的帮助！

【解决方案3】：

其他建议将实现您想要的，但我相信如果您使用类会变得更好

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

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

【讨论】：

【解决方案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);

        });

});

【讨论】：

【解决方案5】：

将两个图像放在单独的类中

切换类就可以看到效果了

【讨论】：