jquery - 内部の画像を見つけて置き換える方法jqueryを使用していますか？

Question

画像を確認して、展開と折りたたみのために画像を置き換えようとして<div> いますが、解決策を見つけることができません。

htmlコード：

<h4 id="expanderHead">Virtual Room <span id="expanderSign">+</span></h4>
<div id="expanderContent" style="display:none">
    content ... content...
</div>

jquery：

$(document).ready(function(){
   $("#expanderHead").click(function(){
      $("#expanderContent").slideToggle();
      if ($("#expanderSign").text() == "+"){
          $("#expanderSign").html("-")
      }
      else {
          $("#expanderSign").text("+")
      }
    });
});

ここでは、+と-の代わりにを配置する必要があり<img src="" alt=""/>ます。

ありがとうございました。

Answer 1

HTML

<h4 id="expanderHead">Virtual Room <span id="expanderSign"><img src="plus-sign.png" /></span></h4>
<div id="expanderContent" style="display:none">
    content ... content...
</div>​

編集済み（より良いjQueryバージョンを追加）

jQueryの新しいバージョン

$(document).ready(function(){

   $("#expanderHead").click(function(){

       $("#expanderContent").slideToggle();

       var plusImg = "http://cdn2.iconfinder.com/data/icons/diagona/icon/16/129.png";
       var minusImg = "http://cdn2.iconfinder.com/data/icons/diagona/icon/16/130.png";        
       $this = $("#expanderSign img");            

       if( $this.attr('src') == plusImg ) { $this.attr('src', minusImg);} 
       else { $this.attr('src', plusImg); }

   });
});

ライブデモを見る

Answer 2

$（document）.ready（function（）{

       $（ "＃expanderHead"）。click（function（）{
      $（ "＃expanderContent"）。slideToggle（）;
      if（$（ "＃imgId"）。attr（'src'）== "d2.png"）{
          $（ "＃imgId"）。attr（ "src"、 "d1.png"）
      }
      そうしないと {
          $（ "＃imgId"）。attr（ "src"、 "d2.png"）
      }
    }）;
}）;

    <h4id="expanderHead">仮想ルーム<imgid='imgId' src ='d2.png' /> </ h4>
<div id = "expanderContent" style = "display：none">
    コンテンツ...コンテンツ...
</ div>