jquery - 如何从触发当前事件的事件中检索数据？

Question

首先我放了一个 div 列表

<div class=grades> Grade: 1, 2, 3, 4, 5, 6 </div>
<div class=classes> Classes numbers depend on the grade </div>
<div class=students> Students names depend on the grade and class </div>

每个等级编号的定义如下：

<a href=# class=gradenum>1</a>
<a href=# class=gradenum>2</a>
<a href=# class=gradenum>3</a>
.....

然后我尝试使用 jquery 通过单击年级编号来显示班级编号。

$("a.gradenum").click(function(){
  var grade = $(this).text();
  $("div#classes").load("ShowClasses.php",{'grade':grade});
});

它按预期工作。类以类似的格式显示。现在我想使用相同的过程按给定的年级和班级编号显示学生的姓名。

$("div#classes").on("click", "a.classnum",function(){
  var class = $(this).text();
  var grade = ??????  //How do I get the grade number here?
  $("div#students").load("ShowStudents.php",{'grade':grade, 'class':class});
});

如何从我第一次在成绩行中单击的数字中获取成绩编号。

Answer 1

您可以使用该index()方法。

$(".classes").on("click", ".classnum", function() {
  var $this = $(this);
  var class = $this.text();
  var grade = $this.index() + 1; // Start at 0
  $(".students").load("ShowStudents.php",{'grade':grade, 'class':class});
});

Answer 2

我会这样做：

var grade; // Move this outside, making it "global".

$("a.gradenum").click(function(){
  grade = $(this).text(); // Set the global grade
  $("div.classes").load("ShowClasses.php",{'grade':grade});
});

$("div.classes").on("click", "a.classnum",function(){
  var class = $(this).text();
  // Use the global grade.
  $("div#students").load("ShowStudents.php",{'grade':grade, 'class':class});
});