如何从click事件对象属性

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(); 

当点击一个人的名字，那就要抓住合适的对象的其他属性并将其放置在适当的divs。例如，如果约翰被点击，约翰的年龄和地址需要显示在下面的div。我怎样才能将列表中的人名与其他属性值联系起来？我想在for循环中用每个名字保存“i”的值，所以有一个与每个名字相关的数字。然后以某种方式引用person [i] .age，当“i”值被点击时，但听起来很笨拙。

JSFIDDLE

Answer 1

使用data-*属性存储在li索引。

1. 使用data-index在li上创建并存储在索引i
2. 使用jQuery的data('index')来获取点击的元素
3. 使用$(this)上保存的索引来访问点击的元素在事件处理程序

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">元素，它的单击事件处理程序使用$(this).data("person")获取，然后从列表中得到的人

Answer 3

您需要使用.index()函数来获取索引名称，然后使用该索引从persons数组中获取名称。像这样：

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

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

这里是更新的fiddle。从那里，你可以做所有你需要的文本操作。

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

Answer 4

在事件处理程序中，您可以访问index()，然后您可以访问相应的数据。

这里是JSFiddle