1

私は現在、最新のチャットを一番上に表示し（ユーザーが投稿リクエストを介してデータを送信すると更新されます）、最も古いチャットを下に押して削除するjqueryを使用してインスタントチャットボックスをコーディングしています。

問題は、複数の最新のチャットが取得された場合 (たとえば、2)、2 つの新しい div が先頭に追加されますが、2 つではなく 1 つの古い 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 には 1 つのクラス「チャット」のみを使用し、ゼブラ スタイルには独立したクラスを与える必要があります。

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 に答える