Question

我正在创建一个类似Facebook的聊天。它从JSON文件中获取最新消息“Not Read”，并将文本附加到“UL”元素vía“LI”到一个框中。如果该框不存在，则会创建并附加文本。我希望当我点击该div时，它隐藏使用margin-bottom负数，当我再次点击它时，它显示Margin-Bottom：0。请帮助我，因为它不起作用。会发生什么事情，当我点击框时，它不会像它应该显示/隐藏一样。

    function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });

    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });

    }

    function getOnJSON(){

    var from;var to;var msg_id;var msg_txt;var new_chat_string;

    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){

    $.each(data.notif, function(i,data){

    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(this);});

        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(this);});
        }
    });
});
}

Answer 1

已在getOnJSON功能和对shoqwChat

的调用中进行了更改

function showChat(id){
    $(this).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").removeAttr('onclick').click(function(){
           hideChat(Id);
        });

    }
    function hideChat(id){
    $(this).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").click(function(){
           showChat(Id);
        });

    }

    function getOnJSON(){

    var self = this;     // Added this line, as this changes scope in each()
    var from;var to;var msg_id;var msg_txt;var new_chat_string;

    //Getting the data from the json file
    $.getJSON("/ajax/chat.json.php",function(data){

    $.each(data.notif, function(i,data){

    from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

            if ($("#chat_"+from+"_lp").length === 0){
           new_chat_string = '<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"><div id="'chat_+from+'_nick" class="chat_name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>';
            $("#boxes").append(new_chat_string);    
            $('#chat_'+from+'_lp').click(function() {showChat(self);});

        }else{

            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');
            $('#chat_'+from+'_lp').click(function() {showChat(self);});
        }
    });
});
}

Answer 2

如下所示更改showChat和hideChat。您正在从this处理程序传递click但未正确使用它。而不是使用removeAttr('onclick')使用unbind('click')。

    function showChat(obj){
        $(obj).animate({marginBottom : "0"}).removeClass("hidden_box").addClass("active_box").unbind('click').click(function(){
           hideChat(this);
        });

    }
    function hideChat(obj){
        $(obj).animate({marginBottom : "-270px"}).removeClass("active_box").addClass("hidden_box").unbind('click').click(function(){
           showChat(this);
        });
    }

创建一个元素并为jQuery分配一个事件处理程序

2 个答案: