Question

我目前正在使用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);
                }
            }
        ); 
    }
});

非常感谢帮助。

Answer 1

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

此外，对于类似的div，你应该只使用一个类“chat”，而对于斑马风格，你应该给它们独立的类。

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

为什么要跳过一些jQuery / javascript代码？

1 个答案: