如何使用JavaScript实现点击选中div后切换展示对应聊天内容

1 修改Twig模板 #

你需要对原有Twig代码做三处调整：

• 给每个联系人卡片添加自定义属性存储关联用户名，点击时可以直接获取标识
• 将全量消息数据和当前登录用户ID注入前端全局变量，供JS过滤使用
• 清空原有写死的消息结构，留空容器供JS动态渲染内容

修改后的Twig核心代码如下：

{% set msg_details = query().from('messages').get() %}
{% set to_add = to_name %}
{% set to_details = query().from('users_users').where('id', to_add).get() %}

<div class="container">
  <h3 class="text-center">Messaging</h3>
  <div class="messaging">
    <div class="inbox_msg">
      <div class="inbox_people">
        <div class="headind_srch">
          <div class="recent_heading">
            <h4>{{auth_user().first_name}}</h4>
          </div>
          <div class="srch_bar">
            <div class="stylish-input-group">
              <input type="text" class="search-bar" placeholder="Search" >
              <span class="input-group-addon">
                <button type="button"> <i class="fa fa-search" aria-hidden="true"></i> </button>
              </span>
            </div>
          </div>
        </div>
        <div class="inbox_chat">
          {% set newArray = [] %}
          {% for msg in msg_details %}
          {% if msg.to_name not in newArray %}
          <!-- 新增data-username属性存储对应用户名 -->
          <div class="chat_list {% if loop.first %}active_chat{% endif %}" onclick="viewMessage(this)" data-username="{{msg.to_name}}">
            <div class="chat_people">
              <div class="chat_img"> <img src="/images/default-avatar.png" alt="avatar"> </div>
              <div class="chat_ib">
                <h5>{{msg.to_name}} <span class="chat_date">{{msg.time}}</span></h5>
              </div>
            </div>
          </div>
          {% set newArray = newArray|merge([msg.to_name]) %}
          {% endif %}
          {% endfor %}
        </div>
      </div>
      <div class="mesgs">
        <!-- 清空原有写死的消息内容，留空容器供JS渲染 -->
        <div class="msg_history"></div>
      </div>
    </div>
  </div>
</div>

<!-- 注入全局数据供JS使用 -->
<script>
window.allMessages = {{ msg_details|json_encode|raw }};
window.currentUserId = {{ auth_user().id|raw }};
</script>

2 新增JS逻辑 #

替换原有没用的copyText函数，新增viewMessage点击处理函数，实现消息过滤渲染：

function viewMessage(clickEl) {
  // 1. 获取选中的用户名
  const selectedUsername = clickEl.dataset.username;
  // 2. 过滤出和当前选中用户相关的所有消息
  const relatedMessages = window.allMessages.filter(msg => {
    // 可根据你的数据表字段实际情况调整判断条件
    return msg.to_name === selectedUsername || msg.from_name === selectedUsername;
  });
  // 3. 获取消息容器
  const msgContainer = document.querySelector('.msg_history');
  msgContainer.innerHTML = '';
  // 4. 遍历渲染消息
  relatedMessages.forEach(msg => {
    // 判断是自己发的消息还是收到的消息
    const isMySend = msg.from_name === window.currentUserId;
    let msgHtml = '';
    if (isMySend) {
      msgHtml = `
      <div class="outgoing_msg">
        <div class="sent_msg">
          <p>${msg.message}</p>
          <span class="time_date">${msg.time}</span>
        </div>
      </div>
      `;
    } else {
      msgHtml = `
      <div class="incoming_msg">
        <div class="incoming_msg_img">
          <img src="/images/default-avatar.png" alt="avatar">
        </div>
        <div class="received_msg">
          <div class="received_withd_msg">
            <p>${msg.message}</p>
            <span class="time_date">${msg.time}</span>
          </div>
        </div>
      </div>
      `;
    }
    msgContainer.innerHTML += msgHtml;
  });
  // 5. 切换选中联系人的高亮状态
  document.querySelectorAll('.chat_list').forEach(el => el.classList.remove('active_chat'));
  clickEl.classList.add('active_chat');
}

注意调整点 #

• 请根据你的messages表实际字段名调整过滤逻辑，比如如果发送者字段是from_id、接收者是to_id，对应修改判断条件即可
• 头像路径替换为你项目内的本地资源路径即可

内容的提问来源于stack exchange，提问作者CodeHunt