javascript - 单击时检索 javascript 对象

Question

示例

假设我有一个 JavaScript 中的学校对象数组...

schools =

[
    {name: "School A", phone: "Phone A", location: "Location A"},
    {name: "School B", phone: "Phone B", location: "Location B"},
    {name: "School C", phone: "Phone C", location: "Location C"},
    ...
]

...我想在段落标签中显示学校名称...

<p data-name="School A">School A</p>
<p data-name="School B">School B</p>
<p data-name="School C">School C</p>

...当我单击给定的学校段落时，我想在单独的 Pane 中显示附加信息。例如，当我点击 School A...

<div id="separate-pane">
    <p>Phone A</p>
    <p>Address A</p>
</div>

为此，我需要检索关联的对象，创建附加信息段落标签，并将它们附加到单独的 Pane 中。当单击给定的学校名称段落时，如何有效地引用正确的 javascript 对象？

想法/想法

1. 使用innerHTML

   • 在点击段落时，从innerHTML 中提取学校名称
   • 迭代 javascript 数组，当 obj.name == innerHTML 时，我们找到了匹配项

2. 使用数据名称属性

   • 与上面相同，但 obj.name == data-name

这两种方法都应该可行，但是有没有更好的方法可以做到这一点，而不必遍历 javascript 数组来找到正确的对象？ 另外，我想要完成的这个过程叫什么？

Answer 1

扩展 Nicolas 的答案，当您从 schools 数组创建 HTML 时，您可以将数组索引放入数据属性中:

$.each(schools, function(i, school) {
    $("#links").append($("<p>", {
        "class": "link",
        text: school.name,
        data: { index: i }
    });
});

$(".link").click(function() {
    var school = schools[$(this).data("index");
    // display school information in #separate-pane
});