javascript - 2つの画像をonClickで切り替える方法

Question

折りたたみ可能なtreeViewを作成しています。私はそれをすべて作りました、私はそれらがクリックされるたびにトグルするために私のアイコン+とアイコンが必要です。-

次のコードを使用して、jQueryを使用して、クリック時にアイコンをから+に変更したときに、この部分を実行しました。-

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

問題は、ノードをもう一度クリックすると、逆方向に移動する方法がわからないことです:)

Answer 1

これは機能するはずです：

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

Answer 2

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

Answer 3

クラスを作らずにこれをやりたかったのです。クリックイベント関数内で、次のようなことができます。

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

Answer 4

デフォルトのimgsrcとしてプラスを追加し、マイナスクラスを定義して画像ソースをマイナス画像に変更します

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