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/

（我並沒有解決問題這兩個用戶都綁定到同一個聊天框但這是另一個故事）