如何从单击事件获取对象属性

Question

HTML

<ol id="person-list"></ol>
<div id="person">
    <h2 id="person-name"></h2>
    <div id="person-age"></div>
    <img id="person-address">
</div>

JS

var persons = [{
    name: 'John',
    age: 54,
    address: '123 Main st.'
}, {
    name: 'Jack',
    age: 55,
    address: '456 Oak Ln.'
}];


$('#person-list').on('click', 'li', function () {
    alert('Hello'); // get other object info here?
});

var f = function () {
    for(var i = 0, len = persons.length; i < len; i++) {
        $('#person-list').append('<li>' + persons[i].name + '</li>');
    }
};
f();

When a person's name is clicked, it would need to grab the appropriate object's other properties and place them in the appropriate divs. For example, if John is clicked, John's age and address need to show in the divs below. How could I link the person's name in the list to its other property values? I thought about saving the value "i" with every name during the for-loop so there's a number associated with each name. Then somehow reference person[i].age when the "i"th value is clicked, but that sounded clumsy.

JSFIDDLE

Answer 1

Use data-* attribute to store the index on the li .

1. Use data-index on the li when creating and store the index i on it
2. Use jQuery's data('index') to retrieve the saved index on the clicked element
3. Use $(this) to access the clicked element in event handler

Demo

 var persons = [{ name: 'John', age: 54, address: '123 Main st.' }, { name: 'Jack', age: 55, address: '456 Oak Ln.' }]; $('#person-list').on('click', 'li', function() { // Get the clicked person's information var person = persons[$(this).data('index')]; // Set info in the corresponding elements $('#person-name').html(person.name); $('#person-age').html(person.age); $('#person-address').html(person.address); }); var f = function() { for (var i = 0, len = persons.length; i < len; i++) { $('#person-list').append('<li data-index="' + i + '">' + persons[i].name + '</li>'); // ^^^^^^^^^^^^^^^^^^^^^^ } }; f(); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ol id="person-list"></ol> <div id="person"> <h2 id="person-name"></h2> <div id="person-age"></div> <div id="person-address"></div> </div> 

Answer 2

您可以将data-attribute添加到<li data-person="id_of_the_person">元素，并在click事件处理程序中使用$(this).data("person")进行获取，然后从列表中获取该人。

Answer 3

You need to use the .index() function to get the index of the name and then use that index to get the name from the persons array. Like this:

$('#person-list').on('click', 'li', function () {

    alert(persons[$(this).index()].name)
});

And here's the updated fiddle . From there, you can do all the text manipulations you need.

$('#person-name').html(persons[$(this).index()].name);
$('#person-age').html(persons[$(this).index()].age);
$('#person-address').html(persons[$(this).index()].address);

Answer 4

In event handler you can access the index() and then you can access the appropriate data.

Here is JSFiddle