处理HTML

Question

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

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

我知道如何做我想要实现的目标，但我不确定如何正确地做到这一点＆＃39;。我可以编写我的函数，根据你点击的内容更新文本。然后我可以通过手动为每个336元素分配一个唯一的ID，然后编写一个循环的函数并将我的第一个函数分配给所有这些元素。虽然这意味着在我的HTML中手动分配336个唯一ID。这件事有点不对劲吗？有没有更好的方法？

我觉得我错过了一些非常明显的东西，这会让事情变得更加轻松 - 也许我采取了一种完全错误的做法？

Answer 1

您不应该使用ID，并且只对所有元素使用单个事件。

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

以下是一个示例：https://davidwalsh.name/event-delegate

许多图书馆为此提供了自己的支持，但实际上很容易做到。

Answer 2

为所有336个元素分配一个onclick事件处理程序。附加到传递给事件处理程序的Event参数的是属性target，它是触发事件的元素。

然后找到此元素的父元素（只需node.parentElement），然后对其进行处理。

P.S。您不需要在元素上拥有唯一ID，以便为其分配事件处理程序。

尝试：

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

Answer 3

尝试使用＆＃34; this＆＃34;关键字，而不是手动分配ID。

因此，您可以使用document.getElementById(id)

代替this 例如，

，而不是

HTML

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

JS

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

您可以尝试

HTML

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

JS

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

Answer 4

您可以使用其他功能遍历DOM。查看Element文档。

有很多方法可以在这里实现你想要的东西，但我会通过为你所有的日期选项分配一个像day这样的共享类，以及像start-time和{{1}这样的另一个类来实现这一点。对于时间选项。然后我将函数绑定到end-time

返回的所有元素