对于ClassName,单击()

时间:2012-02-11 16:40:19

标签: javascript jquery ajax json onclick

更新:一位评论者告诉我更改一些代码,这是新代码,但它不能正常工作。

我正在创建一个类似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(){

//Creating Variables that will be used
var from;var to;var msg_id;var msg_txt;

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

//Repeat for each result
$.each(data.notif, function(i,data){

//Getting a var to info
from = data.from;to = data.to;msg_id = data.id;msg_txt = data.text;

//check if div exists
        if ($("#chat_"+from+"_lp").length === 0){

//If not, create the div
            $("#boxes").append('<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box"></div>');

//Add the senders name
            $("#chat_"+from+"_lp").append('<div id="'chat_+from+'_nick" class="chat_name">'+from+'</div>');

//Add the chats UL
            $("#chat_"+from+"_lp").append('<ul id="chat_'+from+'_txt" class="chat_txt"></ul>');

//Add the message text
            $("#chat_"+from+"_lp").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');

//Add event handler for each div
            $('#chat_'+from+'_lp').click(function() {showChat(this);});

//If div exists just add the text
        }else{

//Add the message text
            $("#chat_"+from+"_txt").append('<li id="' + msg_id + '">'+ msg_txt+'</li>');

//Add event handler for each document
            $('#chat_'+from+'_lp').click(function() {showChat(this);});

//Close If
        }
//Close data for each item      
    });

//Close JSON
});

//Close Function
}

更新2 :为了停止制作和附加内容,我制作了一个将附加的唯一HTML字符串。

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

2 个答案:

答案 0 :(得分:0)

后:

$("#boxes").append('<div id="chat_'+from+'_lp" class="chat_box hidden_box clickable_box" ><div id="name">'+from+'</div><ul id="chat_'+from+'_txt" class="chat_txt"><li id="' + msg_id + '">'+ msg_txt+'</li></ul></div>');

为插入的元素添加事件处理程序:

$('#chat_'+from+'_lp').click(function() { showChat(this)  })

“this”将DOM引用传递给自己。

请注意,您每次都要添加:<div id="name">。 ID必须是唯一的。改为使用类名。

修改

追加到DOM真的很慢。将HTML作为字符串构建并将其一次性插入实际上更有效。此外,您只需要在包装元素上粘贴和ID。其他所有内容都可以使用jQuery选择器派生。它可以帮助您编写更清晰的代码。

这是你需要追加的字符串:

'<div id="chat_'+msg_id+'" class="chat_box hidden_box clickable_box">
<div class="chat_name">'+from+'</div><ul class="chat_txt"><li>
<a href="javascript://">'+msg_txt+'</a></li></ul></div>'

如果您想稍后选择聊天名称,请使用:$('chat_1 .chat_name').html()

将点击处理程序连接到A标记也更具语义意义。所以你要使用:

$('#chat_'+msg_id).find('a').click(function() {showChat(this);});

代码更清晰,更容易遵循这种方式。我希望这会有所帮助。

答案 1 :(得分:0)

使用class而不是id

<div id="chat_sender_lp" class="chat_box hidden_box clickable_box sender-click"

然后

$('.hidden_box.sender-click').live('click', function(){
   $(this).slideToggle(500);
});