jquery单击div中项目的事件处理程序

Question

如何为div中的一堆链接添加jquery click事件处理程序？ 例如：

<div class="test">
<a href="test1.html">link 1</a>
<a href="test2.html">link 2</a>
<a href="test3.html">link 3</a>
</div>

我想为三个链接中的每一个添加一个click事件处理程序，因此我可以将addClass（'selected'）添加到被单击的链接和removeClass（'selected'）。

我知道我可以一个接一个地做，但我想知道最干净的方法是什么......

Answer 1

我会使用.delegate() ：

var classname = 'selected';

$('div.test').delegate('a', 'click', function ()
{
    $(this).addClass(classname).siblings().removeClass(classname);
});

Answer 2

选择器将返回匹配的元素数组。

$('div.test a')

将是树链接。

$('div.test a').click(function() { });

将绑定到所有三个。

Answer 3

选择器的工作方式与CSS选择器类似，因此选择带有类test a标签内的标签

$('.test a').click(function(){

    // select the object that was clicked on
    $(this)
        // add the selected class to it
        .addClass('selected')
        // remove the selected class from it's brothers and sisters
        .siblings().removeClass('selected')

    // stop link from loading and resetting page
    return false

})

演示： http ： //jsfiddle.net/HK6CE/

Answer 4

我会写（没有额外的标记）：

$（'。test a'）。bind（'click'，function（）{

$（本）.addClass（ '选择'）的兄弟姐妹（）removeClass（ '选择'）。;

}）;

兄弟姐妹（）将所有其他dom元素放在同一级别上，因此它会让所有其他元素“a”在内部.test

Answer 5

我相信它是$('.test').each(function(){})