Jquery 如何更改聊天盒上的箭头图像

我想更改页脚右侧聊天室div打开和关闭时的箭头图像

这是我的代码

<div class="chat_olark">
            <div id="top_chat" style="cursor:pointer">
                <div id="chat_heading"><a href="#">Contact Us!</a></div>
                <div id="chat_arw"><a href="javascript:toggle()"><img src="images/chat_arw_up.png"></a></div>
            </div>
            <div id="body_chat" style="display:none;">
                <div id="chat_txt">We're not around, but we'd love to chat another time.</div>
                <form name="cat" action="contact.php" method="post" onsubmit="return valid();">
                <textarea value="click here and type your name..." style="resize: none; height: 15px; margin-left: 5px; width: 235px;" cols="50" rows="20" name="contactname" placeholder="Name" id="name"></textarea>
                <textarea value="click here and type your name..." style="resize: none; height: 15px; margin-left: 5px; margin-top:5px; width: 235px;" cols="50" rows="20" name="email" placeholder="Your Email" id="email"></textarea>
                <textarea value="click here and type your name..." style="resize: none; height: 30px; margin-left: 5px; margin-top:5px; width: 235px;" cols="50" rows="20" name="subject" placeholder="Subject Here!" id="subject"></textarea>
                <textarea value="click here and type your name..." style="resize: none; height: 70px; margin-left: 5px; margin-top:5px; width: 235px;" cols="50" rows="20" name="message" placeholder="Your Message Here!" id="msg"></textarea>
                <input type="submit" name="submit" value="Send" class="proceed_btn505" style="float:right;margin: 10px 7px 0 0;cursor:pointer">
                </form>
            </div>

        </div>

我们不在，但我们想改天再聊。

Jquery：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){

        $("#body_chat").hide();
        $("#top_chat").show();

    $('#top_chat').click(function(){
    $("#body_chat").slideToggle();
    });

});

</script>

$（文档）.ready（函数（）{
$（“#body_chat”）.hide（）；
$（“#热门聊天”）.show（）；
$（“#top_chat”）。单击（函数（）{
$（“#body_chat”）.slideToggle（）；
});
});

---

当显示body_chat时，应更改图像箭头。我的第二个图像名是arr_down.png。请帮帮我

这应该可以做到：

(function($){
$('div#chat_arw a').on('click',function(e){
    $("#body_chat").slideToggle();
    $(this).children().attr('src','images/arr_down.png');
});
})(jQuery);

然而，我打赌改变类而不是src

所以你会：

<div id="chat_arw"><a href="javascript:toggle()" class="arrow-up'>Open Chat!</a></div>

---

我无法理解$（this）.removeClass（）.addClass（'arrow-down'）；该部分删除所有类，然后向下添加类箭头

<div id="chat_arw"><a href="javascript:toggle()" class="arrow-down'>Open Chat!</a></div>

(function($){
$('div#chat_arw a').on('click',function(e){
    $("#body_chat").slideToggle();
    $(this).removeClass().addClass('arrow-down');
});
})(jQuery);