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指令中，如下所示：

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

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

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

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

1 个答案: