使用焦点和模糊在无序列表中显示和隐藏DIV

Question

我正在使用Fred LeBlancs roundabout plugin，并且我只将“灯箱”合并到“活动”中央图像（为什么我是“addClass”.active）。当图像是活动文字时，我也想显示带有标题文字的隐藏div。我成功地使用了灯箱，但当中央图像集中时我的所有字幕都隐藏或显示出来，而我当然只需要活动的一个。需要一些帮助来显示一个标题。

<li><a href="slide.jpg" rel="prettyPhoto" title="Slide"> 
<img src="slide_thumb.jpg" alt="Slide" /></a> 
<div class="caption" style="display:none">Slide Caption</div> 
</li> 

我的代码：

$('ul.rbt li').focus(function() { 
    $('a').addClass('active'); 
    $('.caption').show() 
}); 
$('ul.rbt li').blur(function() { 
    $('a').removeClass('active'); 
    $('.caption').hide() 
}); 

Answer 1

这应该工作：

$('ul.rbt li').focus(function() { 
    $(this).find('a').addClass('active'); 
    $(this).find('.caption').show() 
}); 
$('ul.rbt li').blur(function() { 
    $('a').removeClass('active'); 
    $('.caption').hide() 
}); 

Answer 2

如果你正在考虑为每次显示的标题的用户将图像聚焦，仍然对你可以使用这个即使图像未聚焦，也会显示标题。

$('ul.rbt li').focus(function() { 
     $('a').addClass('active'); 
      $('.caption').hide() 
      $('.caption').show() 
     }); 
    $('ul.rbt li').blur(function() { 
     $('a').removeClass('active'); 
    });