フォーカスとブラーを使用して順序付けられていないリストのDIVを表示および非表示にする

Question

私はFred LeBlancs roundabout pluginを使用していますが、「アクティブ」な中央画像のみにライトボックスを組み込みました（なぜ「addClass」。私はまた、イメージがアクティブなものであるときに、キャプションテキストを使って隠されたdivを表示したい。私はライトボックスで成功しましたが、中央の画像に焦点が当てられているときに私のキャプションはすべて非表示になっています。もちろん、アクティブなものが必要です。 1つのキャプションだけを表示するには少しの助けが必要です。

<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'); 
    });