javascript - 根据 anchor 击更改 InnerHTML

Question

我对 Web 开发有点陌生，所以我希望有人能帮我回答这个问题。

我正在构建类似于 Facebook Messenger 的“Web Messenger”原型(prototype)。我有一个边栏，当窗口加载时，我用 anchor 标签的 UL 填充它，它看起来像 this .这是它的代码

var toAdd = document.createDocumentFragment();
var newUL = document.createElement('ul');
newUL.id = 'menu-content';
newUL.className = 'menu-content collapse out';

for(var i = 0; i < 5; i++){
  var newLI = document.createElement('li');
  var newA = document.createElement('a');
  newA.id = 'chat' + i;
  newA.setAttribute('href', "#");
  newA.innerHTML = "Chat" + (i + 1);
  newLI.appendChild(newA);
  newUL.appendChild(newLI);
}

toAdd.appendChild(newUL)
document.getElementById("menu-list").appendChild(toAdd);

我在页面顶部还有一个 Div，它会显示有关当前聊天的一些详细信息，但暂时只会显示聊天的名称，与 anchor 标记上的相同。

现在基于另一个 StackOverflow 帖子，从 anchor 标记调用 JS 函数的正确方法是

var c0 = document.getElementById("chat0");

//Set code to run when the link is clicked
// by assigning a function to "onclick"
c0.onclick = function(id) {
  //Change Title Name here
  //Do other stuff in the future
  return false;
}

然而，我可以在任何时候在侧边栏上进行 20 多个聊天，所以这似乎需要编写很多重复的代码。

有更好的方法吗？

Answer 1

为您的聊天提供一个通用类而不是示例 chat 然后使用 .getElementsByClassName() 同时将点击事件附加到所有聊天。

所以你可以在 newA.id 之后添加 className :

newA.id = 'chat' + i;
newA.className = 'chat';

然后附加点击事件:

var chats = document.getElementsByClassName('chat');

for (var i=0; i < chats.length; i++) {
    chats[i].addEventListener('click', chatClick, false);
}

function chatClick(){
    //chat is clicked
    //The 'this' object here refer to clicked element
}

您可以使用 .addEventListener() 代替 onclick。

注意:您可以在节点创建后直接附加click事件:

for(var i = 0; i < 5; i++){
    var newLI = document.createElement('li');
    var newA = document.createElement('a');
    newA.id = 'chat' + i;
    newA.setAttribute('href', "#");
    newA.innerHTML = "Chat" + (i + 1);
    newA.addEventListener('click', chatClick, false); //Attach click event HERE
    newLI.appendChild(newA);
    newUL.appendChild(newLI);
  }

希望这对您有所帮助。