创建事件处理程序时，从其他元素获取值

Get value from a different element when creating an event handler

本文关键字：其他 元素 获取 事件处理 程序 创建      更新时间：2023-09-26

我在页面上列出了一系列HIDDEN contactID元素，并为附近的锚点分配了一个事件处理程序（单击锚点会弹出联系人的配置文件）。我希望在创建事件处理程序时能够传入HIDDEN元素的值（锚点可能不在HIDDEN元件旁边，所以我不想遍历DOM）。

<input type="hidden" name="first-contact" id="first-contact" value="1" />
<.. code ..>
<a href="#" class="contact-viewer">View contact</a>
<input type="hidden" name="second-contact" id="second-contact" value="4" />
<.. code ..>
<a href="#" class="contact-viewer">View contact</a>

我目前的做法是将HIDDEN元素的ID标记放在锚点的REL属性中，并在运行事件时获取REL值。

<a href="#" class="contact-viewer" rel="second-contact">View contact</a>

这工作得很好，但感觉不太好（我觉得使用REL是一种黑客行为）。有更好的方法吗？

这里的常用策略是为链接赋予href属性，这样，如果客户端上的脚本不可用或失败，服务器就可以完成请求。在这种情况下，所需的值可以在href属性中。

如果脚本可用，请从href获取值，取消导航并使用XHR或其他方法完成请求。

如果您不想将链接用作链接，请使用按钮。链接推断导航到另一个页面，按钮推断将停留在同一页面上的进程。

理想的方法是通过将HTML元素分组在一起（例如封装在<div>中）来指定关系，然后使用父/子DOM遍历。

然而，如果不能做到这一点，那么你所采取的方法是好的。您提到的唯一问题是rel属性的使用。使用HTML5，您可以为此目的使用data-属性：

<a href="#" class="contact-viewer" data-contact="first-contact">View contact</a>

您可以使用在事件处理程序中检索该值

el.getAttribute('data-contact');

请在此处查看有关自定义数据属性的详细信息。

相关文章：