jQuery的切换图像无法正常工作

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');
    }
})

小提琴演示

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

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

并切换班级，您可以看到效果