如何使用jquery？</div>查找和替换<div>中的图像

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

   });
});

SEE LIVE DEMO

Answer 2

$(document).ready(function(){

       $("#expanderHead").click(function(){
      $("#expanderContent").slideToggle();
      if ($("#imgId").attr('src') == "d2.png"){
          $("#imgId").attr("src","d1.png")
      }
      else {
          $("#imgId").attr("src","d2.png")
      }
    });
});

    <h4 id="expanderHead">Virtual Room <img id='imgId' src='d2.png' /></h4>
<div id="expanderContent" style="display:none">
    content ... content...
</div>