Javascript 带有ajax调用的jQuery聊天盒仅适用于第一个用户

我正在做一个项目，其中包括一个用户之间的内部聊天，是一个简单的fb一样的框，点击聊天框打开，选择用户后，将加载聊天历史记录，并显示该框

我使用PHP从数据库中获取数据，并用foreach循环填充用户列表

小提琴

HTML

<div class="chat-wrapper">
  <div class="chat-holder">
        <div class="chat-header">
            <i class="fa fa-circle text-success"></i> Chat (2)
        </div>
        <div class="chat-box">
          <?php 
          $userID = $user->id;
          $usersList = DB::select("SELECT * FROM users WHERE id != '$userID' AND active = 1 ORDER BY role_id");

          foreach ($usersList as $userItem) {
            $roleID = $userItem->role_id;
            $userRole = DB::select("SELECT name FROM roles WHERE ID = '$roleID';");
            $userPic = site_url('upload/img/users/' . $userItem->username);
            print '<div class="media chat-user-item chat-' . $userItem->username . '" data-user="' . $userItem->id . '" data-uname="' . $userItem->username . '" data-from="' . $userID . '">';
            print '<div class="media-left">';
            print '<a href="#">';
            print '<img class="media-object img-circle" src="' . $userPic .'.jpg" alt="..." style="width:50px">';
            print '</a>';
            print '</div>';
            print '<div class="media-body">';
            print '<h4 class="media-heading">' . $userItem->realname . '</h4>';
            print '<small>' . $userRole[0]->name. '</small>';
            print '</div>';
            print '</div>';
          }
          ?>
        </div>
    </div>

    <div class="chat-user-holder hidden">
      <div class="chat-user-header">
              <i class="fa fa-circle text-success"></i> <span class="box-userName">Noh</span> <a class="dismiss-chat" href=""><i class="fa fa-close pull-right "></i></a>
          </div>
          <div class="chat-user-box slimScroll">
              Noh
          </div>
          <div class="msgHolder">
            <input class="form-control sendMessage" placeholder="Scrivi Messaggio..."/>
          </div>
    </div>
 </div>

---

这只适用于第一个用户，但是，当我单击第二个用户时，该框将不会显示

小提琴

---

您缺少为每个用户元素绑定代码中与用户相关的部分：

$('.chat-user-item')

返回2个元素，每个用户一个。但是，由于jQuery在没有索引的情况下访问DOM元素数组时默认使用第一个，因此您实际上只为第一个用户执行此语句下面的所有代码

因此，javascript变量

fromUID

、

fromUname

、

boxName

和

userID

都只与第一个用户相关

作为一种解决方案，您可以在jQuery

指令中包装代码，如下所示：

$.each($('.chat-user-item'), function(i, el){
   var $el = $(el);
   //...
}

这是一把小提琴的叉子，按预期工作：

（我没有解决两个用户绑定到同一个聊天室的问题，但这是另一回事）
尝试使用insteadProblems与sql@AlexeyObukhov正如我在最后一篇笔记中所说，我没有解决这个问题，这个问题与两个用户都绑定到同一个聊天框有关，第二个用户现在正在响应单击事件，这是这里的主要问题。“这只适用于第一个用户，但是，当我单击第二个用户时，该框将不会显示。”现在它“工作”：该框显示：）好，我认为正在工作，但是，更新功能由于绑定到同一个聊天框，使该框闪烁并加载所有聊天日志。我所有的聊天线路都在同一条线上time@andreaem您肯定需要为每个用户提供一个聊天框，这将自行解决。您的php后端可以为每个用户输出一个。@Andream我刚刚更新了小提琴，没有后端，我将无法做更多的事情。希望有帮助
$.each($('.chat-user-item'), function(i, el){
   var $el = $(el);
   //...
}