當用戶點擊圖像時，將圖像從加號切換到減號

Question

在此站點http://www.stephencarlwillis.com單擊「隱藏」以隱藏視頻後，您將看到兩個圖像。

圖像是加號和減號。圖像的默認值應該是一個加號，用於指示用戶點擊時展開。然後圖像在被點擊後顯示一個減號。

我無法弄清楚的是如何在用戶第二次單擊圖像後使圖像返回到加號圖像，使圖像從加號到減號之間來回切換。

下面是我必須進行圖像切換的代碼示例，但無法將圖像切換回加號。

$('#leftcolumn').hide(); 
$('#2d').hide(); 
$('#development').hide(); 
$('#right').hide(); 
$('#right2').hide(); 

$(function() { 
$('.img2').click(function(){ 
$(".img2").attr('src',"assets/images/close.png"); 
$('#right2').toggle("fast"); 
$('#development').toggle("fade"); 
return false; 
}); 
}); 

這是我正在測試的代碼，用於嘗試切換或切換加號和減號圖像。

$(function() { 
$('.img1').click(function() { 
$('#right').toggle("fast"); 

if ($('.img1').is(':visible')) { 
    $(this).attr('src',"assets/images/close.png"); 
}else{ 
    $(this).attr('src',"assets/images/open.png"); 
} 
}); 
}); 

這裏是jQuery的html。

<div id="leftcolumn"> 
<h1>Stephen Carl Willis:<br> 
Web Developer/Designer</h1> 

<img src="<?php echo base_url();?>/assets/images/open.png" alt="2d" class="img1">2D</> 
<img src="<?php echo base_url();?>/assets/images/open.png"  alt="2d"class="img2">Development</> 

<div id="right"> 
<div id="2d"> 
2D graphic design coming soon. 
</div><!--2d--> 
</div> 
<div id="right2"> 
<div id="development"> 
<p>Development portfolio coming soon.</p> 
</div> 
</div> 


</div> 

謝謝你的一切幫助。我一直試圖弄清楚這一個星期了。

Answer 1

試試這個

DEMO

這將在jQuery的版本只工作在下面1.9.1

$('.img2').toggle(
    function(){ $(this).attr("src", "assets/images/close.png"); }, 
    function(){ $(this).attr("src", "assets/images/open.png"); } 
); 

試試這個

$(document).ready(function() { 
    var open=true;  
    $('.img2').click(function() { 
    $(this).attr('src', function(i, oldSrc) { 
     return oldSrc == 'assets/images/close.png' ? 'assets/images/open.png' : 'assets/images/close.png'; 
    }); 

     if(open==true) 
     { 
      // do what you want 

      open=false; 
     } 
     else 
     { 
     // do what you want 

      open=true; 
     } 

    }); 
}); 

編輯後的新DEMO

希望這會有所幫助，謝謝