更改圖像與jQuery使用.toggle（）在相同的功能

Question

我其實知道如何用Jquery更改圖像，但以下案例讓我真的陷入困境。 所以我有一個div我顯示圖像點擊這樣的：

$(dcoument).ready(function() { 
    $('.image').click(function() { 
     $('.element').toggle(); 
     $(this).attr('src', 'image2.png'); 
    }); 
}; 

Someow .attr()功能不會在這種情況下工作，我不知道爲什麼，我甚至有一個函數改變這個特定的像這樣懸停的圖像：

$(document).ready(function() { 
    $('.image').hover(function() { 
     $(this).attr('src', 'image2.png'); 
    }, function() { 
     $(this).attr('src', 'image1.png'); 
    }); 
} 

它工作的方式應該如此。任何想法爲什麼我發佈的代碼不能改變點擊圖像？提前致謝。

Answer 1

您可以使用hasClass添加條件。

<img src="image1.png"> 
<button>change</button> 

$(function(){ 
    $('button').on('click', function(){ 
    if($('img').hasClass('fb')) { 
     $('img').removeClass('fb'); 
     $('img').attr('src', 'http://townandcountryremovals.com/wp-content/uploads/2013/10/firefox-logo-200x200.png'); 
    } else { 
     $('img').addClass('fb'); 
     $('img').attr('src', 'http://www.thebloodycure.com/wp-content/uploads/2016/02/FaceBook-Logo-200x200.png'); 
    } 
    }); 
}) 

https://jsfiddle.net/c84kouny/1/