如何从单击处理程序中的对象数组访问对象属性？

Question

我创建了一个对象构造函数的多个实例，我将它们放入一个数组中并循环显示到一个列表中。现在我想从该列表中 select 一个名称属性以用于 onclick 事件处理程序（此代码中未显示）。我想知道如何在点击处理程序中访问名称属性。到目前为止，这是我尝试过的方法，但我一直未定义。

console.log(contactarray[i].name);
console.log(contactarray.name);

代码

$(document).ready(function() {

function ContactList (name, email, number,address) {
    this.name = name;
    this.email = email;
    this.number = number;
    this.address = '6539 Wilton Ave Culver City CA 90234';
}

var christian = new ContactList('Christian', 'christian@example.com', '323-555-124');
var rich = new ContactList('Rich', 'rich@example.com', '323-555-124');
var scott = new ContactList('Scott', 'scott@example.com', '323-555-124');
var danny = new ContactList('Danny', 'danny@example.com', '323-555-124');
var taka = new ContactList('Taka', 'taka@example.com', '323-555-124');
var tim = new ContactList('Tim', 'tim@example.com', '323-555-124');
var patrick = new ContactList('Patrick', 'patrick@example.com', '323-555-124');
var jacques = new ContactList('Jacques', 'jacques@example.com', '323-555-124');

var contactarray = [christian, rich, scott, danny, taka, tim, patrick, jacques];

for (i = 0; i < contactarray.length; i++) {
    $('#contacts').append('<li class="itemname" id="'+i+'"><a href="#">' + contactarray[i].name + '</a></li>');
}

我的问题是在单击列表项之一时获取名称属性。

Answer 1

尝试替换

for (i = 0; i < contactarray.length; i++) {
    $('#contacts').append('<li class="itemname" id="'+i+'"><a href="#">' + contactarray[i].name + '</a></li>');
}

至

contactarray.forEach(function(contact, id) {
    $('#contacts').append('<li class="itemname" id="'+id+'"><a href="#" onclick="alert(' + contact.name + ')">' + contact.name + '</a></li>');
});

Answer 2

function ContactList (name, email, number,address) {
    this.name = name;
    this.email = email;
    this.number = number;
   this.address = '6539 Wilton Ave Culver City CA 90234';
}

window.onload = function() 
{
     var christian = new ContactList('Christian', 'christian@example.com','');
     var rich = new ContactList('Rich', 'rich@example.com', '323-555-124');
     var scott = new ContactList('Scott', 'scott@example.com', '323-555-');
     var contactarray = [christian, rich, scott];

     var btn = document.getElementById('btn');  

     btn.addEventListener('click',function(){
          for (i = 0; i < contactarray.length; i++) {
         $('#contacts').append('<li class="itemname" id="'+i+'"><a  href="#">' + contactarray[i].name + '</a></li>');
      }
     },false);

}

Answer 3

您运行遇到的是循环中异步 JavaScript 事件的经典问题。这在您的问题中并不明显，因为它在任何地方都没有 click 处理程序，但在您随后的评论中变得显而易见。始终在问题中提供足够的信息以重现实际问题。简化代码是好的，但当关键问题区域被简化时就不是这样了！

最简单的解决方案是为每次循环迭代调用一个函数。每次你调用一个函数时，它都会创建一个 "closure" 来捕获该函数中的所有参数和局部变量，即使对于异步代码，如稍后调用的 click 处理程序也是如此。

由于您使用的是 jQuery，因此您可以使用 $.each() 来实现，或者您可以在 for 循环中创建并调用您自己的函数，只要你在每次循环迭代中调用它。

这是一个可行的解决方案。我还通过将联系人项目直接放在数组中而不是为每个联系人项目创建一个命名变量来稍微简化您的代码。我将 ContactList 构造函数的名称更改为 ContactItem 因为它代表一个单独的项目而不是列表：

function ContactItem( name, email, number,address ) {
    this.name = name;
    this.email = email;
    this.number = number;
    this.address = '6539 Wilton Ave Culver City CA 90234';
}

var contactarray = [
    new ContactItem('Christian', 'christian@example.com', '323-555-124'),
    new ContactItem('Rich', 'rich@example.com', '323-555-124'),
    new ContactItem('Scott', 'scott@example.com', '323-555-124'),
    new ContactItem('Danny', 'danny@example.com', '323-555-124'),
    new ContactItem('Taka', 'taka@example.com', '323-555-124'),
    new ContactItem('Tim', 'tim@example.com', '323-555-124'),
    new ContactItem('Patrick', 'patrick@example.com', '323-555-124'),
    new ContactItem('Jacques', 'jacques@example.com', '323-555-124')
];

var $contacts = $('#contacts');

$.each( contactarray, function( i, contact ) {
    var $contact = $(
        '<li class="itemname" id="' + i + '">' +
            '<a href="#">' + contact.name + '</a>' +
        '</li>'
    );
    $contact.click( function() {
        alert( contact.name );
    }).appendTo( $contacts );
});

Updated fiddle

如何从单击处理程序中的对象数组访问对象属性？

How to access an object property from an array of objects in a click handler?

javascript

arrays

object

object-properties

如何从单击处理程序中的对象数组访问对象 属性？

How to access an object property from an array of objects in a click handler?

javascript

arrays

object

object-properties

如何从单击处理程序中的对象数组访问对象属性？