时间戳

首页 > 解决方案 > 动态 JS 频道菜单链接问题

javascript - 动态 JS 频道菜单链接问题

问题描述

我正在开发一个聊天应用程序，用户可以在其中创建频道并在其中聊天。

每次单击侧面的频道链接（每次添加新频道时都会更新频道链接），我想将 localStorage 'channel' 变量（currentChannel）更新为单击链接的 id 并加载该频道消息右侧聊天窗口，带有对服务器的 socket.on 调用。但是，当我单击链接时没有任何反应。

我可能会补充一点，我的所有代码都在 document.addEventListener('DOMContentLoaded', () => { }) 中。尽管在 socket.on('update channels') 之后生成的带有 li 标记的链接正确显示在加载的页面上，但由于某种原因它们不会出现在源 HTML 中。提前非常感谢任何帮助！

完整来源：https ://github.com/kylepw/project2/blob/master/static/index.js

第 85 行的代码在初始化和添加新通道时更新通道链接。

// Update channel list
socket.on('update channels', channels => {
  if (channels) {
    channelsList = channels;
    channelsBar.innerHTML = ``;
    for (let channel of channelsList) {
      const li = document.createElement('li');
      li.innerHTML = `<a href="#" class="selectChannel" id="${channel}">${channel}</a>`;

      channelsBar.appendChild(li);
    }
  }
});

这（从第 155 行开始）是我试图对链接点击做出反应的地方：

const selectChannel = document.getElementsByClassName('selectChannel');
//...
// Load clicked channel 
for (let i = 0; i < selectChannel.length; i++) {
  selectChannel[i].addEventListener('onclick', () => {
    currentChannel = this.id;
    localStorage.setItem('channel', currentChannel);
    socket.on('messages', currentChannel); 
  });
}

标签： javascriptsocket.iochat

解决方案

我认为不会this.id给您预期的结果。如果您检查页面上的 HTML 并且那里的频道 id 是正确的，那么请尝试修改您的onClick函数以接受e参数并从中获取 id：

for (let i = 0; i < selectChannel.length; i++) {
     selectChannel[i].addEventListener('onclick', (e) => {
         let currentChannel= e.target.id; //id of the element you clicked
         localStorage.setItem('channel', currentChannel);
         socket.on('messages', currentChannel); 
     });
}

推荐阅读