如何知道哪个类是通过jQuery & JS选择的

Question

我有一个带有链接的列表：

<li class="link-1"><a href="#">One</a></li>
<li class="link-2"><a href="#">Two</a></li>
<li class="link-3"><a href="#">Three</a></li>
..

用户单击任意链接，然后使用jQuery显示该链接的内容。像这样的东西：

$(".link-??? a").click(function() {
    alert($(".link-??? a").html());
})

就像这样。我不打算创建X函数(作为链接的数量)，那么我能做什么呢？我应该在其他东西中替换??? ..

Answer 1

你可以这样做：

 $('li[class^="link"] a').click(...

但是，只有当li只有一个类，或者link-X类是列表中的第一个类时，这才能起作用。

在处理程序中，可以使用$(this)引用a元素：

alert($(this).text());

更好的方法是给li元素一个通用的类：

<li class="link"><a href="#">One</a></li>
<li class="link"><a href="#">Two</a></li>
<li class="link"><a href="#">Three</a></li>

$('.link a').click(...将更加可靠。

Answer 2

试试看..

$(".link-??? a").click(function() {
    alert(this.innerHTML);
})

在click事件中，this应该引用被单击的元素。

你也可以这样做..

alert($(this).html());

..but第一种方法更简单，也更快。

Answer 3

为每个元素赋予相同的类。然后在你的javascript中，在你的函数中引用它。查看以下链接以查看工作示例

http://jsfiddle.net/kprgr/2/

<li class="link"><a href="#">One</a></li>
<li class="link"><a href="#">Two</a></li>
<li class="link"><a href="#">Three</a></li>

$(".link").click(function() {
    alert($(this).find("a").html());
});