Question

我对Web开发有点新意，所以我希望有人能为我解答这个问题。

我正在构建一个＆＃34; Web Messenger＆＃34;类似于Facebook Messenger。我有一个侧边栏，当窗口加载时，我填充了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，它会显示有关当前聊天的一些详细信息，但目前只会显示聊天的名称，与锚标记上的相同。

现在基于另一个StackOverflow帖子，从锚标记调用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);
  }

希望得到这个帮助。

Answer 2

确定。你可以给他们所有的一个类，加载后只需使用一个简单的jQuery代码绑定onclick所有这些：

 $('a.className').click(function() {
     // Your code here
 });

现在如果在执行代码后添加了a标签，您只需再次调用它或手动绑定到这些元素。

根据锚点击更改InnerHTML

2 个答案: