php - jqueryを使用して複数の画像の画像キャプションを非表示および表示する方法は?

Question

私は以下のような構造を持っています、

<div class="btheme">    
    <a href="/a1"><img src="/a1.jpg" /></a>
    <div class="caption">
         <div>image caption</div>
    </div>   
</div>


<div class="btheme">    
   <a href="/a3"><img src="/a3.jpg" /></a>
   <div class="caption">
       <div>image caption3</div>
   </div>   
</div>


<div class="btheme">    
   <a href="/a2"><img src="/a2.jpg" /></a>
   <div class="caption">
      <div>image caption2</div>
   </div>   
</div>

jqueryでキャプションを表示/非表示にするために以下のコードを使用しました。

<script type="text/javascript">

    jQuery(document).ready(function(){

         jQuery("div.btheme .img").mouseover(function(){
              jQuery(this).parent().find("div.caption").css('display','none');              
         });

         jQuery("div.btheme .img").mouseout(function(){
             jQuery(this).parent().find("div.caption").css('display','block');              
         });                
   });

  </script>

それは動作しません？。これどうやってするの？。

Answer 1

の前のドットを削除し.imgます。

また、キャプション div を選択するには、代わりにこれを使用します。

jQuery(this).closest("div.btheme").find("div.caption")...

jQuery(this).parent()間違っているアンカータグが表示されます。

更新: jsfiddle の作業コードは次のとおりです。

Answer 2

だけimgではありません.img

jQuery("div.btheme img").mouseover(function(){
   jQuery(this).parent().next("div.caption").css('display','none');
});

jQuery("div.btheme img").mouseout(function(){
   jQuery(this).parent().next("div.caption").css('display','block');    
});