我在 HTML 中有此代码片段

<ul class="orderedList">
    <li class="il l1">Appathon 2k14</li>
    <li class="il l2">Da Vinci Code</li>
    <li class="il l3">Java Beans</li>
    <li class="il l4">Gigabyte Wars</li>
    <li class="il l5">Spin A Web</li>
</ul>

我的 jquery 脚本中为每个列表项设置了事件处理程序，如下所示：

$(".l1").click(function x() {
    alert("Description : \n " + eventsDescription[0] + "\n\nLocation : \n" + loc[0]);
});
$(".l2").click(function x() {
    alert("Description : \n " + eventsDescription[1] + "\n\nLocation : \n" + loc[1]);
});
$(".l3").click(function x() {
    alert("Description : \n " + eventsDescription[2] + "\n\nLocation : \n" + loc[2]);
});
$(".l4").click(function x() {
    alert("Description : \n " + eventsDescription[3] + "\n\nLocation : \n" + loc[3]);
});
$(".l5").click(function x() {
    alert("Description : \n " + eventsDescription[4] + "\n\nLocation : \n" + loc[4]);
});

现在，我正在考虑像这样优化我的逻辑：

$(".il").click(function x() {
    alert($(".il").attr("class"));
});

由于 'il' 是每个标签（列表项）中存在的类，因此当我单击任何列表项时，它应该返回该类的名称。我的问题是，当我单击任何列表项时，我在警报对话框中得到的结果为 'l1 il' 。

根据我的代码，我认为我应该通过单击第二项来获得 'l2 il' ，其余项目依此类推。