在jQuery中更改图像

Question

我是jquery的新手，可能是我的问题很基础。 我在jQuery和以上版本中实现了一个可展开的面板，我有一个+的图像，当点击面板时会展开。我想将该图像更改为 - 面板展开时。 所以基本上我想改变+图像 - 一旦+被点击。

以下是我的代码plz help。

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#addImage').click(function() { 
      $('#pBody').slideToggle('slow'); 
     }); 
    }); 

</script> 

 <asp:Panel ID="pBody" runat="server"> 
      Duis aute irure dolor in reprehenderit in voluptate velit 
      esse cillum dolore eu fugiat nulla pariatur 
     </asp:Panel> 
</div> 
</form> 

Answer 1

把这个图像放在一个类中。 您可以使用addClass或removeClass更改点击类。

Answer 2

jQuery的应该是这样的：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#addImage').click(function() { 
      $('#pBody').slideToggle('slow'); 
      $(this).toggleClass('show-minus'); 
     }); 
    }); 

</script> 

然后在你的CSS你有这样的事情：

#addImage { 
      background: url(plus-icon.gif); 
      height: 30px; 
      width: 30px; 
      cursor: pointer; 
} 
#addImage .show-minus { 
      background: url(minus-icon.gif); 
} 

当然你HTML应该是这样的：

<div id="addImage"></div> 

注意：如果addImage已经是一个标签，则不需要光标，高度和宽度线在CSS。如果您想设置高度/宽度，请确保在其中添加display：block行。

Answer 3

$('#addImage').click(function() { 
    $('#pBody').slideToggle('slow'); 
    if($('#pBody').is(":visible")) { 
     $(this).attr("href", "http://domain.com/minusimg.png"); 
    } else { 
     $(this).attr("href", "http://domain.com/plusimg.png"); 
    } 
});