Question

我正在与NodeJS聊天，但现在有一个奇怪的问题，当有人加入聊天时：

this is good

但是当你加入聊天或某人断开连接或连接一些奇怪的事情时：

this is not good

用户列表似乎移动了1个像素。你能看到一条粗线的顶部和右侧吗？为什么会这样？

当我'刷新'用户列表时，代码中的任何内容都没有变化：

socket.on('refreshUsers', function(refreshData) {
    var users_html = "<div id=\"userList\"><ul class=\"users\"><div class=\"scroll-pane\">";
    console.log("Refreshing users...");

    refreshData.users.forEach(function(data) {
            users_html += "<li><img src=\"./pic/"+ data.pic +"\">"+ data.username +"</li>";
        });

    users_html += "</ul></div></div>";

    $( "#userList" ).html(users_html);
});

当我加载用户列表时（所以当你不加入时）：

function buildChat() {
    console.log("Build chat...");
    $( "#container" ).fadeOut(0);
    var rooms_html = "<div class=\"head\"><select name=\"rooms\">";
    var users_html = "<div id=\"userList\"><ul class=\"users\"><div class=\"scroll-pane\">";
    var chatBox = "<div id=\"chatBox\"></div>";
    var messagesBoard = "<div id=\"messagesBoard\"><div id=\"messagesHead\">UBB | Emotions | Help</div><textarea id=\"message\" placeholder=\"Typ hier om te chatten\"></textarea></div>";
    socket.on('startChatInfo', function(chatInfo) {

        console.log("Loading rooms...");
        chatInfo.rooms.forEach(function(data) {
            rooms_html += "<option>"+ data.from +" &raquo "+ data.name +"</option>";
        });
        rooms_html += "</select></div>";

        console.log("Loading users");
        chatInfo.users.forEach(function(data) {
            users_html += "<li><img src=\"./pic/"+ data.pic +"\">"+ data.username +"</li>";
        });

        users_html += "</ul></div></div>";


        $( "#container" ).html(rooms_html + users_html + chatBox + messagesBoard);
        $( "#container" ).fadeIn(1000);
    });

}

这是CSS，无论是加载用户还是刷新，都是一样的：

#userList {
    margin:0px;
    width:228px;
    height:355px;
    float:right;
    border:1px solid #cccccc;
    background-color: #f2f2f2;
}

.users li {
    list-style-type:none;
    background-color: #f2f2f2;
    width:100%;
    height:50px;
    border-bottom: 1px solid #cccccc;
    line-height:50px;
    padding-left:7px;
}

.users li:hover {
    background-color: #cccccc;
    cursor:pointer;
}

ul {
    padding:0px;
}

.scroll-pane {
    width: 100%;
    height: 355px;
    overflow: auto;
}

当然是HTML：

<div id="userList"><ul class="users"><div class="scroll-pane"><li><img src="./pic/none.png">Anne</li><li><img src="./pic/none.png">Dylan</li><li><img src="./pic/none.png">lennard</li><li><img src="./pic/none.png">Mackie</li></div></ul></div>

演示网址：http://apps.jreitsma.eu:3101/

要加入聊天，请在控制台中输入：

socket.emit('requestUsername', { value: 'hereyourname' });

您可能需要使用不同的用户名登录2个选项卡才能看到它！我真的不知道为什么会这样，以及如何解决它。

Answer 1

您在#userList div中放置了具有相同ID的div。将刷新用户功能更改为以下内容：

socket.on('refreshUsers', function(refreshData) {
    var users_html = "<div class=\"scroll-pane\"><ul class=\"users\">";
    console.log("Refreshing users...");

    refreshData.users.forEach(function(data) {
        users_html += "<li><img src=\"./pic/"+ data.pic +"\">"+ data.username +"</li>";
    });

    users_html += "</ul></div>";

    $( "#userList" ).html(users_html);
});

CSS / Node JS：刷新用户列表奇怪的位置

1 个答案: