Question

我使用Facebook布局创建了一个聊天系统，右侧列出了名称，并在点击右侧的名称时弹出聊天框。系统目前在用户右侧列表由我设置的地方工作。

<div class="chat-sidebar">
    <div class="sidebar-name">
        <!-- Pass username and display name to register popup -->
        <a href="javascript:register_popup('Jodaine', 'Jodaine');">
            <img width="30" height="30" src="@Url.Content("~/Images/Jodaine.PNG")"/>
            <span>Jodaine</span>
        </a>
    </div>
</div>

这非常有效，但我想动态填充用户。所以当用户登录时。

我有这个函数通过脚本执行相同的操作但是当我调用函数时它会在已经存在的div之上。所以名字重叠。

    function populatesidebar() {
        ccc = ccc + 1;
        var element = '';
        element = element + '<div class="chat-sidebar">';

        element = element + '<div class="sidebar-name"><a href="javascript:register_popup(\'Jodaine2\', \'Jodaine2\');"><img width="30" height="30" src="@Url.Content("~/Images/Jodaine.PNG")"/><span>Jodaine'+ccc+'</span></a></div></div>';

        document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + element;
    }

使用以下命令每三秒调用此函数：

$(document).ready(function () {
    //let the code run every second
    setInterval(function() {
        populatesidebar();
    },3000); //1000 = 1 seconds
});

我已添加：

document.getElementsByClassName("chat-sidebar").remove();

在populatesiderbar函数的开头，但没有任何显示。

Answer 1

如果我可以假设您的初始HTML中包含chat-sidebar元素：

function populatesidebar() {
    ccc = ccc + 1;

    var sidebarNameHtml = '<div class="sidebar-name"><a href="javascript:register_popup(\'Jodaine2\', \'Jodaine2\');"><img width="30" height="30" src="@Url.Content("~/Images/Jodaine.PNG")"/><span>Jodaine'+ccc+'</span></a></div>';

    $('.chat-sidebar').html(sidebarNameHtml);

}

这里我使用jQuery的html()方法设置chat-sidebar的内容，覆盖任何现有内容。你已经有了jQuery，所以利用它:)

动态填充用户

1 个答案: