Javascript 处理大量id'；HTML格式的

我是网页设计新手，有一个问题我真的不知道如何用最雄辩的方式解决。我有7个工作日元素，每个元素有2个下拉列表。下拉列表有24个选项，每天每小时一个。这意味着用户总共可以点击336个选项

我需要为这336个元素中的每一个分配一个函数，该函数将更新下拉菜单来自的相应框中的文本

我知道如何去做我想要实现的事情，但我不知道如何“正确”地去做。我可以编写我的函数，根据您单击的内容更新文本。然后我可以遍历并手动为我的336个元素中的每个元素分配一个唯一的ID，然后编写一个函数循环遍历并将我的第一个函数分配给所有元素。尽管这意味着在我的HTML中手动分配336个唯一ID。这有什么不对劲吗？还有更好的办法吗

我觉得我错过了一件非常明显的事情，这会让事情变得更容易——也许我采取了一种完全错误的方法

尝试使用“

this

”关键字，而不是手动分配ID

因此，您可以使用

this

例如，代替

HTML

你可以试试

HTML

---

您还可以使用其他函数遍历DOM。查看文档

---

在这里，有无数种方法可以实现您想要的功能，但我会通过为所有的日常选项分配一个共享类，如

day

，为时间选项分配另一个类，如

start time

和

end time

。然后我将函数绑定到

document.getElementsByClassName（'day'）返回的所有元素

为所有336个元素分配一个

onclick

事件处理程序。传递给事件处理程序的参数附带一个属性

target

，它是触发事件的元素

然后找到该元素的父元素（只需

节点.parentElement

），并对其进行处理

另外，为元素分配事件处理程序不需要元素上有唯一的id

尝试：

---

您不应该使用ID，而应该对所有元素只使用一个事件

有一个称为事件委派的概念，您可以将事件附加到父节点，它将为所有子节点处理该事件。由于javascript中的事件“冒泡”，任何事件最终都会命中父节点并触发它。当这种情况发生时，您可以检查事件的原始目标，并检查它是否是您关心的类之一

下面是一个例子：

---

许多库都提供了自己的支持，但实际上这很容易做到

为了更好地理解您试图实现的目标，您应该提供一些示例代码来说明您的解释？如果这是生产代码，您可以将其混淆。事件委派：这将创建336个单独的事件，这将严重影响较慢浏览器的性能。改为签出事件委派（）。@csturges这很好。然而，我认为根据事件处理程序的附加高度，实现它可能会有点困难。OP可能会发现将336个事件处理程序附加到每个元素上更简单。在这方面，我怀疑性能是否会受到事件处理程序的影响。你有相同的参考资料吗？没有。事件对象包含原始元素本身的详细信息，可用于执行单个事件可以执行的所有操作。简单的事情并不意味着这是个好主意。数百个不必要的事件处理程序肯定会影响性能。我是在做了一些非常类似的事情，破坏了移动设备的性能之后才了解到事件委托的。也许你现在不会注意到真正的不同，但是现在学会用正确的方式去做仍然是值得的。

<element id="myid" onClick="changer(myid);"> </element>

function changer(id)
{
document.getElementById(id).innerHTML="changed";
}

<element onClick="changer(this);"> </element>

function changer(obj)
{
obj.innerHTML="changed";
}

document.querySelectorAll('.el').forEach(function(t) {
      t.onclick = func;
});