0

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

5 回答 5

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');
     }
 })
于 2014-01-24T18:26:56.370 回答
1

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

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

小提琴演示

于 2014-01-24T18:27:03.010 回答
1

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

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

$(this).toogleClass('inactive');
于 2014-01-24T18:31:06.263 回答
0

这是以几种不同的方式完成的同一件事。它们都做同样的事情，但具有不同程度的紧凑性。

最后一种可能是最方便和最灵活的一种。您永远不必触摸您的 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);

        });

});
于 2014-01-24T18:56:19.163 回答
0

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

并切换类你可以看到效果

于 2014-01-24T19:25:27.167 回答