在javascript中获取类名时出错

Question

我在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',等等其他项目.

Answer 1

你应该使用$(this)参考,

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

在您的代码中,您正在调用.attr()元素集合,这会导致检索该0集合中索引处的元素的类名.