在单击时检索javascript对象

示例

假设我有一个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>

学校A
学校B
学校C

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

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

打电话

致辞

为此，我需要检索关联的对象，创建附加的info段落标记，并将它们附加到单独的窗格中。当我以一种有效的方式点击一个给定的学校名称段落时，我如何引用正确的javascript对象

想法/想法

使用innerHTML

• 单击段落，从innerHTML中提取学校名称
• 遍历javascript数组，当obj.name==innerHTML时，我们找到了一个匹配项

使用数据名属性

• 同上，但obj.name==数据名

这两种方法都应该有效，但是有没有更好的方法可以做到这一点，而不必遍历javascript数组来找到正确的对象？

---

另外，我要完成的这个过程叫什么？

我会将索引保存在HTML中的数据参数中，然后使用索引在学校数组中查找附属学校。简单代码：

学校A
学校B
学校C
$（文档）.ready（函数（）{
var学校=[
{姓名：“学校A”，电话：“电话A”，地点：“地点A”}，
{姓名：“学校B”，电话：“电话B”，地点：“地点B”}，
{姓名：“学校C”，电话：“电话C”，地点：“地点C”}，
...
]
$（'.button'）。在（'click'，function（）上{
var index=$（this.data（'index'）；
var数据=学校[指数]；
//使用数据显示信息。
});
})

我会将索引保存在HTML中的数据参数中，然后使用该索引在学校数组中查找副学校。简单代码：

学校A
学校B
学校C
$（文档）.ready（函数（）{
var学校=[
{姓名：“学校A”，电话：“电话A”，地点：“地点A”}，
{姓名：“学校B”，电话：“电话B”，地点：“地点B”}，
{姓名：“学校C”，电话：“电话C”，地点：“地点C”}，
...
]
$（'.button'）。在（'click'，function（）上{
var index=$（this.data（'index'）；
var数据=学校[指数]；
//使用数据显示信息。
});
})

如果在click listener上使用jquery，您可以使用$（this）.data（“name”）获取存储在data name attriburw中的数据

如果在click listener上使用jquery，您可以使用$（this）.data（“name”）获取存储在data name attriburw中的数据

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

$。每个（学校，功能（i，学校）{
$（“#链接”）。追加（$（“”{
“类”：“链接”，
text:school.name，
数据：{索引：i}
});
});
$（“.link”）。单击（函数（）{
var school=学校[$（本）。数据（“指数”）；
//在#单独窗格中显示学校信息
});

扩展Nicolas的答案，从

数组创建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
});

$。每个（学校，功能（i，学校）{
$（“#链接”）。追加（$（“”{
“类”：“链接”，
text:school.name，
数据：{索引：i}
});
});
$（“.link”）。单击（函数（）{
var school=学校[$（本）。数据（“指数”）；
//在#单独窗格中显示学校信息
});
您可以使用jQuery
数据
功能将整个学校对象存储在创建的
p
元素中，然后在元素单击时检索它，如下所示。检查演示-

var学校=[
{姓名：“学校A”，电话：“电话A”，地点：“地点A”}，
{姓名：“学校B”，电话：“电话B”，地点：“地点B”}，
{姓名：“学校C”，电话：“电话C”，地点：“地点C”}
]
学校.学校（功能（项目）{
var$el=$（''+item.name+'
'）；
$.data（$el[0]，item）；//使用元素存储学校对象
$el.单击（函数（）{
$（“#单独窗格”）.html（$.data（此，项）.phone+''+$.data（此，项）.location）；//检索保存的学校对象
})  
$（“#学校”）。追加（$el）；
})
您可以使用jQuery
数据
功能将整个学校对象存储在创建的
p
元素中，然后在元素单击时检索它，如下所示。检查演示-

var学校=[
{姓名：“学校A”，电话：“电话A”，地点：“地点A”}，
{姓名：“学校B”，电话：“电话B”，地点：“地点B”}，
{姓名：“学校C”，电话：“电话C”，地点：“地点C”}
]
学校.学校（功能（项目）{
var$el=$（''+item.name+'
'）；
$.data（$el[0]，item）；//使用元素存储学校对象
$el.单击（函数（）{
$（“#单独窗格”）.html（$.data（此，项）.phone+''+$.data（此，项）.location）；//检索保存的学校对象
})  
$（“#学校”）。追加（$el）；
})
为什么不“写作”所有应显示的HTML，点击后隐藏/显示平移的内容？如果每个学校都有一组图片，也应该显示出来，那会怎么样？有数千所学校。它不会过度填充DOM吗？@MikeB-你有很多建议和答案，你正在不同的网站中添加澄清我可以礼貌地提出建议吗
var 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"}
]

schools.forEach(function(item){
  var $el = $('<p>' + item.name + '</p>');
  $.data($el[0], item); // store school object with the element
  $el.click(function(){
        $('#separate-pane').html( $.data(this, item).phone + ' '+ $.data(this, item).location ); // retrieve saved school object
  })  
    $('#schools').append($el);
})