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

將兩個圖像放在單獨的類中

並切換班級，您可以看到效果