我有一些结构相同的div,我想在鼠标悬停div时切换,所以隐藏和b显示:
<ul class="tweets">
<li>
<div class="a">
<p>show a</p>
</div>
<div class="b">
<p>show b</p>
</div>
</li>
<li>
<div class="a">
<p>show a</p>
</div>
<div class="b">
<p>show b</p>
</div>
</li>
<li>
<div class="a">
<p>show a</p>
</div>
<div class="b">
<p>show b</p>
</div>
</li>
</ul>
这是我正在使用的jquery:
$(document).ready(function(){
var tweet = $("ul.tweets .a");
tweet.hover(function(){
$('.a').toggle();
$('.b').toggle();
});
});
但是这会切换所有div,我只需要切换一个。我应该使用$(this)但我不知道怎么做。我怎么能让这个工作?
小提琴是here
答案 0 :(得分:4)
你快到了。试试这个 - 将hover
处理程序分配给li
而不是div
内部,然后使用.find()
找到div
并切换每个$(document).ready(function(){
var tweet = $("ul.tweets li");
tweet.hover(function(){
$(this).find('.a').toggle()
.end().find('.b').toggle();
});
});
之一。
{{1}}
答案 1 :(得分:0)
应该这样做:
$(document).ready(function(){
var tweet = $("ul.tweets li");
tweet.hover(function(){
$(this).find(".a").toggle();
$(this).find(".b").toggle();
});
});
这里是小提琴: http://jsfiddle.net/kpNY4/2/