根据锚点更改InnerHTML

debugcn 发表于 Dev

康纳·沃森（Conor Watson）

我是Web开发的新手，所以我希望有人可以为我解答。

我正在为类似于Facebook Messenger的“ Web Messenger”构建原型。我有一个侧边栏，当窗口加载时，我用锚标记的UL填充它，看起来像这样。这是它的代码

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多次聊天，因此这似乎是很多重复的代码。

有一个更好的方法吗？

扎卡里亚·阿查尔基（Zakaria Acharki）

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

因此，您可以在以下位置添加className newA.id：

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);
  }

希望对您有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。