一、老规矩，直接上代码
二、注意里面的错误示例和正确示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery循环绑定事件并传值</title>
<style type="text/css">
li {
width: 200px;
text-align: center;
color: #007AFF;
border: 1px solid #40AFFE;
margin: 5px 0;
padding: 5px 0;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
//生成4个同学 li,
//要求点击每个学生的名称（name）的时候，
//打印出他（她）的名称（name）和年龄（age）
var students = [{
name: '小明',
age: 16
}, {
name: '小丽',
age: 15
}, {
name: '小米',
age: 18
}, {
name: '小红',
age: 17
}];
$(function () {
//获取ul对象
var ul = $('ul');
//开始遍历学生
for (var i in students) {
//生成没一个学生li
var oneStudent = students[i];
var li = $('<li></li>').html(oneStudent.name).attr('age', oneStudent.age);
ul.append(li);
/**
* 错误的传值方式：此时打印的结果
li.click(function(){
console.log(oneStudent.name + '----' + oneStudent.age);
//不论点击任何一个学生，
//打印出来的都是最后一个学生 小红的名称和年龄 小红----17})
*/
/*********** 正确的传值方式 ************/
li.click({
stu: oneStudent
}, function (event) {
var stu = event.data.stu;
console.log(stu.name + '----' + stu.age);
});
}
})
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>