jQuery和交換圖像

Question

我有這個簡單的切換功能來打開/關閉信息。我想在旁邊添加一個圖像，以便它顯示展開或關閉。我試過這種方法，但沒有發生任何事情。我錯過了什麼？

$('#slick-software').click(function() { 
    $('#slickbox-software').toggle(400); 
    $('#slick-img').attr('src') == "/images/up.png" ? "/images/down.png" : "/images/up.png"; 
    return false; 
}); 

... 
... 

<a href="#" id="slick-software"> 
    <img id="slick-img" src="/images/up.png" border="0" align="absmiddle" />&nbsp;&nbsp; 
     <b>Software</b><br> 
    </a> 
<div id="slickbox-software"> 
    text here 
</div> 

感謝您的幫助。

Answer 1

嘗試：

var src_img = ($('#slick-img').attr('src')=="/images/up.png") ? "/images/down.png" : "/images/up.png"; 
$('#slick-img').attr('src', src_img) 

Answer 2

要強制圖片刷新，一旦你已經改變了SRC。這裏有一個問題，這是有幾個像樣的答案非常相似：

How to refresh the src of <img /> with jQuery?

Answer 3

的錯誤是在這裏，我想：

$('#slick-img').attr('src') == "/images/up.png" ? "/images/down.png" : "/images/up.png"; 

你只是檢查「SRC」屬性在這裏，但不要」實際上改變它。

使用以下代替：

var newSrc = $('#slick-img').attr('src') === "/images/up.png" ? "/images/down.png" : "/images/up.png"; 
$('#slick-img').attr('src', newSrc); 

Answer 4

一個更好的解決辦法是使用CSS的上/下的圖像，你可以把它作爲了＃油滑的軟件元件上的背景圖片（有一些左填充應用於它）。然後，您可以在單擊處理程序中切換某個類，以更改背景圖像，或者最好更改CSS sprite的背景位置。我還傾向於調用preventDefault而不是返回false來覆蓋默認點擊行爲，因爲返回false stops event bubbling。

$('#slick-software').click(function(e) { 
    $('#slickbox-software').toggle(400); 
    $(this).toggleClass("expanded"); 
    e.preventDefault(); 
}); 

然後在你的CSS，是這樣的：

#slick-software{ 
    display: inline-block; 
    padding: 0 0 0 20px; 
    background: url(img/toggle.png) no-repeat 0 0; 
} 

#slick-software.expanded{ 
    background-position: 0 -50px; 
}