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

单击某个人的姓名时，需要获取相应对象的其他属性并将其放入相应的div中。例如，如果单击John，John的年龄和地址需要显示在下面的div中。如何将列表中的人名与其他属性值相关联？我想在for循环期间使用每个名称保存值“i”，因此每个名称都有一个数字。然后以某种方式引用人[i] .age，当点击“i”值时，但听起来很笨拙。

JSFIDDLE

Answer 1

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

上

在data-index上创建并存储索引li时使用i
使用jQuery＆＃39; s data('index')检索已点击元素的已保存索引
使用$(this)访问事件处理程序中的被点击元素

Demo

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

如何从click事件中获取对象属性

4 个答案: