1

我目前正在使用 jquery 编写一个即时聊天框，它将在顶部显示最新的聊天（当用户通过发布请求发送数据时刷新）并将最旧的聊天向下推送并将其删除。

问题是，如果检索到多个最新聊天（例如，2 个），则会在前面添加两个新 div，但只删除一个最旧的 div 而不是两个...我尝试超时，但它也没有工作..

下面是我认为有问题的代码片段。

function showData(currentchatstyle, data, final){
   var newchatstyle;
    if (currentchatstyle == "chatone") {
        newchatstyle = "chattwo";
    }
    else {
        newchatstyle = "chatone";
    }

    $('div[class^="chat"]:first').before('<div class="' + newchatstyle + '" style="display:none;">' + data + ' </div>');
    $('div[class^="chat"]:first').slideDown(500,"swing", function(){
        $('div[class^="chat"]').last().fadeOut(500, function() {
            $(this).remove(); 
        });
    });

    return newchatstyle;
}

$('input[name="content"]').keyup(function(key) {
    if (key.which==13) {

        var author = $('input[name="author"]').val();
        var content = $('input[name="content"]').val();
        var lastnum = $('postn:first').text();
        var chatstyle = $('div[class^="chat"]:first').attr("class");

        $.post(
            "chatajax.php",
            { "author": author, "content": content, "lastnum": lastnum }, 
            function(data) {
                var msg = data.split("|~|");
                for (var i = 0; i < msg.length; i++) {
                    chatstyle = showData(chatstyle, msg[i], true);
                }
            }
        ); 
    }
});

帮助将不胜感激。

4

1 回答 1

0

问题是您确实选择了当前淡出的 div $('div[class^="chat"]').last()，因为您不是remove立即选择它们，而是在动画回调中。例如，您可能会立即删除chat该类，以便在下次调用时不会选择它showData。

此外，对于类似的 div，您应该只使用一个类“聊天”，而对于斑马风格，则应为它们提供独立的类。

var chatstyle = "one";
function showData(data, final){
    chatstyle = chatstyle=="one" ? "two" : "one";
    var newDiv = $('<div class="chat '+chatstyle+'" style="display:none;">'+data+'</div>');
    $('div.chat:first').before(newDiv);
    newDiv.slideDown(500, "swing", function(){
        $('div.chat:last').removeClass('chat').fadeOut(500, function() {
//                        ^^^^^^^^^^^^^^^^^^^^
            $(this).remove(); 
        });
    });
}
function post(data) {
    return $.post(
        "chatajax.php",
        data,
        function(data) {
            var msg = data.split("|~|");
            for (var i = 0; i < msg.length; i++)
                showData(msg[i], true); // what's "final"?
        }
    );
}

$('input[name="content"]').keyup(function(key) {
    if (key.which==13)
       post({
           "author": $('input[name="author"]').val(),
           "content": $('input[name="content"]').val(),
           "lastnum": $('postn:first').text() // I'm sure this should not be extracted from the DOM
       });
});
于 2012-12-13T15:43:18.000 回答