Question

我想改变打开和放大的箭头图像关闭页脚右侧的聊天框div。

这是我的 CODE

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

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

Answer 1

这应该可以解决问题：

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

但是，我打赌会改变课程而不是srcs。

所以你会：

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

然后切换到：

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

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

1 个答案: