jquery next()这个

时间:2013-02-14 05:47:18

标签: jquery this next

我解决了一个小问题。

尝试制作简单的手风琴导航。用jquery,但注意到我无法弄清楚的东西。

这是我的代码

<div class="box"> Item 1</div>
<div class="text"> Text Box </div>
<div class="box"> Item 2</div>
<div class="text"> Text Box 2</div>
<div class="box"> Item 3</div>
<div class="text"> Text Box 3</div>

JS

$('.box').click(function(){
    $('.text').slideUp()
    $(this).next().slideToggle()    
})

我想知道的是,如果我使用

    $(this).next().slideToggle()      

一切正常。

现在我尝试将(替换)替换为:

    $('.text').next().slideToggle() 

但效果不同。 我认为(这)与div文本有关,或者至少与DOM中的其他内容有关?

2 个答案:

答案 0 :(得分:3)

点击事件中的$(this)代表事件来源,另一方面$('.text')代表拥有class文字的所有元素的集合。 $('.text').next().slideToggle()会在选择器slideToggle返回的第一个集合元素上调用$('.text')

答案 1 :(得分:1)

简而言之:

$(this) // <----Represents current target which got the event

,同时:

$('.text') // <--- this is a collection of all elems with class '.text' so all
           // -----will be getting events simultaneosly.