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

更好的解决方案是使用CSS作为上/下图像，您可以将其作为背景图像包含在#slick-software元素上（应用了一些左边的填充）。然后，您可以在单击处理程序中切换一个类，以更改背景图像，或者最好更改CSS sprite的背景位置。我也更喜欢调用preventDefault而不是返回false来覆盖默认的单击行为，因为返回false stop 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;
}

Answer 2

这个错误就在这里，我想：

$('#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 3

尝试：

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

Answer 4

您希望在更改src后强制刷新图像。这里有一个问题与一些不错的答案非常相似：

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

jquery和交换图像

4 个答案: