使用 websockets 在聊天中链接名称

Question

我正在尝试使用聊天教程http://www.sanwebe.com/2013/05/chat-using-websocket-php-socket 来解决这个问题。我正在尝试创建锚点，如果单击该锚点将转到每个用户的个人资料。问题是在对多个用户进行测试期间，链接仅指向房间中的第一个用户。我花了相当多的时间试图弄清楚这一点。 如何获得单独的可点击链接？ 我正在使用带有控制器处理的链接的 CodeIgniter。我无法理解如何在这个结构中执行任何循环或 while 语句。

带有 HTML 的 JavaScript

websocket.onmessage = function(ev) {
    var msg = JSON.parse(ev.data); //PHP sends Json data
    var type = msg.type; //message type
    var umsg = msg.message; //message text
    var uname = msg.name; //user name
    var ucolor = msg.color; //color

    if(type == 'usermsg') 
    {
        $('#message_box').append("<div><span class=\'user_name\'       style=\'color:#'+ucolor+'\"><button type='button' class='greenButton' onclick='proceed()' id='mem_name' value='"+uname+"'>"+uname+"</button></span> : <span class=\"user_message\">"+umsg+" </span></div>" );

    }`

JS函数

function proceed (button) {
    var mem_name = $('#mem_name').val();
    var form = document.createElement('form');
    form.setAttribute('method', 'post');
    form.setAttribute('action', 'member_chat');
    form.style.display = 'hidden';
    form.setAttribute("target", "formresult");

    var hiddenField = document.createElement("input");      
    hiddenField.setAttribute('name', 'mem_chat');
    hiddenField.setAttribute('value', mem_name)
    form.appendChild(hiddenField);
    document.body.appendChild(form)
    form.submit();
}

Answer 1

在高层次上，您的问题是所有插入的按钮都具有相同的 id，mem_name。 ID 必须是唯一的，所以$("#mem_name") 会在找到第一个 mafch 后停止。

这里的快速解决方法是在您的内联点击侦听器中传递this：

onclick="proceed(this)"

并使用$(button)（即proceed的参数）而不是$("#mem_name")。

更优雅的解决方案是完全消除内联侦听器并使用 jQuery 的 .on 委托。将id=mem_name 更改为class=mem_name，消除onclick 侦听器，并添加此代码以运行仅一次（即不在消息事件侦听器内）：

$("#message_box").on("click", ".mem_name", proceed);

然后将$("#mem_name") 更改为$(this)。这将导致proceed 在任何时候在#message_box 内单击具有mem_name 类的元素时运行。