如何在单击时切换两个图像答案

【问题标题】：How to toggle two images onClick如何在单击时切换两个图像
【发布时间】：2013-02-28 09:49:06
【问题描述】：

我正在制作一个可折叠的树视图。我做到了，我只需要我的+ 和- 图标在被点击时切换。

我在点击时将图标从+ 更改为- 时，使用带有以下代码的jQuery：

$(this).attr('src','../images/expand.gif');

问题是，当我再次单击该节点时，我不知道如何让它转过来:)

【问题讨论】：

jQuery toggle to change image的可能重复

标签： javascript image onclick treeview

【解决方案1】：

我想在不上课的情况下做到这一点。在您的点击事件函数中，您可以执行以下操作：

if($(this).attr('src') == '../images/collapse.gif')
   $(this).attr('src', '../images/expand.gif');
else
   $(this).attr('src', '../images/collapse.gif');

【讨论】：

【解决方案2】：

添加 plus 作为默认的 img src 然后定义一个减号类将图像源更改为减号图像

$("selector_for_your_link").click(function () {
      $(this).toggleClass("minus-class");
    });

【讨论】：

【解决方案3】：

寻找jquery函数toggleClass :)

http://jsfiddle.net/Ceptu/

HTML：

<div id="box">

    Hello :D

</div>

jquery：

$("#box").click(function () {
    $(this).toggleClass("red");
});

CSS：

#box {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.red {
   background-color: red !important;
}

记住 !important 真的很重要！！！

有很多方法可以做到这一点：D

【讨论】：

很高兴我能提供帮助，对于大于 25x25 的图像，最好的方法是在你叫他显示之前加载图像，显示但他在屏幕外：使用位置和左侧的含义：-1000px;

【解决方案4】：

这应该可行：

<style>
.expand{
    content:url("http://site.com/expand.gif");
}
.collapse{
    content:url("http://site.com/collapse.gif");
}
</style>

<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>

【讨论】：

你能告诉我如何做这部分，当我想在本地做时（所以css中没有URL）
尝试使用 content:url('./images/expand.gif');