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; 
}