特定の部門のみをクリックしてイベント

Question

私はそれに製品イメージを持つページを持っており、それぞれのイメージの上に '詳細情報'ボタンがあります。クリックすると、画像上にオーバーレイが表示され、詳細情報が表示されます。オーバーレイが表示されたら、

<div class=“products_overlay overlay_test”> 
    <div class=“products_overlay_info”> 
    <div class=“product_more_info”> 
     <span>More Info</span> 
    </div> 
    </div> 

    <ul class=“hover_text”> 
    <li class=“product_less_info”><span>Less Info</span></li> 
    </ul> 
</div> 

は、今一度「少ない情報」とは、それは余分な情報をオーバーレイを隠すクリックしたと言い、別のボタンがあります： HTMLは次のようになります。これはそれのためにjQueryのです：

$j('.product_more_info').on('click', function(){ 
$j('.product_less_info').show(); 
$j('.product_more_info').hide(); 


}); 

$j('.product_less_info').on('click', function(event){ 
event.preventDefault(); 
$j('.product_more_info').show(); 
$j('.product_less_info').hide(); 
}); 

これは動作しますが、しかし、私の問題は、ユーザーが「詳細」をクリックしたとき、それはとても製品/イメージのリストだと、それはそれはそれはすべてのためのdivを隠しDIV隠すということですユーザーがクリックしたものだけでなく、商品や画像も表示できます。 私は.nextを使用しようとしましたが、運がありません。

$j('.product_more_info').on('click', function(){ 
    $j(this).next('.product_less_info').show(); 
    $j(this).next('.product_more_info').hide(); 

}); 

どのようにこれを達成するためのアイデアですか？

Answer 1

それを行うには、この

$j('.product_more_info').on('click', function(){ 
    $j('.product_less_info', $j(this).parents('.products_overlay')).show(); 
    $j(this).hide(); 
}); 

Answer 2

最も簡単な方法を試してみては.closest(selector)を使用して共通の祖先にアクセスすることである - この場合には、それはあなたも、この呼び出し.parent() 2回を達成することができます.products_overlay

$j('.product_more_info').on('click', function(){ 
    $j(this).closest('.products_overlay').find('.product_less_info').show(); 
    $j(this).hide(); 
}); 

です：

$j('.product_more_info').on('click', function(){ 
    $j(this).parent().parent().find('.product_less_info').show(); 
    $j(this).hide(); 
}); 

しかし、.closest(selector)このケースは、将来あなたのhtml構造を少し変更する可能性があるので、より信頼できます。