jQuery与ajax调用聊天框只能与第一个用户

Question

我正在做一个项目，其中包括用户之间的内部聊天，是一个简单的fb像框通过点击聊天框打开，选择后用户将加载聊天历史和展示框。

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

小提琴 https://jsfiddle.net/znj0Lvyo/1/

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> 

JS

$(document).on('load',function(){ /* hide elements on load */ 
    $('.chat-box').css('display','none'), 
    $('.chat-user-holder').hide(), 
    $('.msgHolder').hide(500) 
    }); 

    $('.chat-header').click(function(){ /* chat list open */ 
    $('.chat-box').slideToggle(500); 
    }); 

    var fromUID = $('.chat-user-item').data("user"); 
    var fromUname = $('.chat-user-item').data("uname"); 
    var boxName = '.chat-' + fromUname; 
    var userID = $('.chat-user-item').data('from'); 

    function update() { 
    $.ajax({ /* update ajax call */ 
     data: { 
     touid: userID, 
     fromuid: fromUID 
     }, 
     url: '/echo/html/', 
     method: 'POST', 
     dataType: "html", 
     cache: false, 
     success: function(response){      
      $(".chat-user-box").html(response); 
     } 
    }); 
    $('.chat-user-box').scrollTop($('.chat-user-box').prop("scrollHeight")); 
    } 

    $(document).ready(function(){ 
     setInterval(function() { 
      update(); 
     }, 1000); 
    }); 

    $(boxName).click(function() { /* user chat box open */ 
    $('.chat-user-holder').show(); 
    $('.chat-user-holder').toggleClass('hidden'); 
    $('.chat-user-box').hide().slideToggle(500); 

    $.ajax({ /* Ajax call get username */ 
     data: { 
     uname : fromUID, 
     }, 
     url: '/echo/html/john', 
     method: 'POST', 
     dataType: 'html', 
     success: function(response){ 
     $(".box-userName").html(response) 
     } 
    }); 

    update(); 

     $('.chat-box').slideToggle(500); 
     $('.msgHolder').show(500); 
     $('.chat-user-box').scrollTop($('.chat-user-box').prop("scrollHeight")); 
    }); 

    $('.chat-user-header').click(function() { /* */ 
     $('.chat-user-box').slideToggle(500); 
     $('.msgHolder').slideToggle(500); 
    }); 

    $(".dismiss-chat").click(function(event) { /* close box using cross button */ 
    event.preventDefault(); 
    $('.chat-user-holder').hide(); 
}); 

$('.sendMessage').bind("enterKey",function(e){ 
    $.ajax({ /* Chiamata ajax insert messaggio */ 
    data: { 
     toID: fromUID, 
     fromID: userID, 
     message: $('.sendMessage').val() 
    }, 
    url: '/echo/html/', 
    method: 'POST', 
    success: function(response){ 
     update();} 
    }); 
    $('.sendMessage').val(''); 
}); 
$('.sendMessage').keyup(function(e){ 
    if(e.keyCode == 13) 
    { 
     $(this).trigger("enterKey"); 
    } 
}); 

这仅在第一个用户完全工作，但是，当我点击第二使用箱子将不会显示。

小提琴 https://jsfiddle.net/znj0Lvyo/1/

Answer 1

你缺少为每个用户单元的代码的用户相对部分结合：

$('.chat-user-item') 

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

因此javascript变量fromUID,fromUname,boxName和userID都只与第一个用户有关。

作为一个解决方案，您可以在一个jQuery each指令如下wrapp你代码：

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

这是你的小提琴作为预期工作叉子：https://jsfiddle.net/Djul/pur11o8y/2/

（我并没有解决问题这两个用户都绑定到同一个聊天框但这是另一个故事）