2

オブジェクト コンストラクターの多数のインスタンスを作成し、それらを配列に配置し、ループしてリストに表示しました。onclickここで、そのリストから name プロパティを選択して、イベント ハンドラーで使用したいと考えています(このコードには示されていません)。クリック ハンドラで name プロパティにアクセスする方法を知りたいです。これは私がこれまでに試したことですが、未定義のままです。

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>');
}

私の問題は、クリックされたときにリスト項目の 1 つの name プロパティにアクセスすることです。

4

3 に答える 3

3

あなたが遭遇したのは、ループ内の非同期 JavaScript イベントに関する古典的な問題です。clickこれは、ハンドラーがどこにもなかったため、質問からは明らかではありませんでしたが、その後のコメントから明らかになりました。実際の問題を再現するために、質問には常に十分な情報を提供してください。単純化されたコードは良いことですが、本質的な問題領域が単純化されている場合はそうではありません!

最も簡単な解決策は、ループの反復ごとに関数を呼び出すことです。関数を呼び出すたびに、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 );
});

更新されたフィドル

于 2015-07-19T05:55:50.277 に答える
-1 
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);

}
于 2015-07-19T05:07:42.380 に答える
-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>');
});
于 2015-07-19T05:03:35.433 に答える