jqueryで前の要素を表示/非表示にする

Question

これは理論上単純ですが、parent、parentsUntil、next以上のようないくつかの要素を試しましたが、それを理解することはできませんでした。

以下に示すように、いくつかの画像が表示されています。表示されている画像は2つあり、表示可能なボタンは2つあります。divボタンの上にマウスを置くと、表示/非表示の画像が表示または非表示になります。

<div class="quarterWidth boxShadow"> 
    <h2>category</h2> 
    <img src="image.jpg" width="180" height="180" alt="xyz" class="normalPic"> 
    <img src="other.jpg" width="180" height="180" alt="xyz" class="hoverPic"> 
    <p class="button button180"><a class="trad" href="#">Traditional</a></p> 
    <p class="button button180"><a class="contemp" href="#">Contemporary</a></p> 
</div> 

私は正常にjQueryを使って.hoverPicを隠されている、と私はa.contempボタンにカーソルを合わせると、私は.normalPic画像を非表示にしたい、と.hoverPicは表示するために、そしてあなたが.tradにカーソルを合わせると、反対が起こるでしょう。

これはjQueryでどのように実現しますか？ここに私の哀れな試みがある：

$(function() { 
    $('.hoverPic').hide(); 

    $('.contemp').hover(function(){ 
     $(this).parentsUntil('.boxShadow').next('.normalPic').hide(); 
     $(this).parentsUntil('.boxShadow').next('.hoverPic').show(); 
    }); 

    $('.trad').hover(function(){ 
     $(this).parentsUntil('.boxShadow').next('.normalPic').show(); 
     $(this).parentsUntil('.boxShadow').next('.hoverPic').hide(); 
    }); 

}); 

Answer 1

私は.closest()を使用したいです親を見つけるdivとその後、コンテキストとして、関連する画像を検索することを使用します。

$(function() { 
    $('.hoverPic').hide(); 

    $('.contemp').hover(function(){ 
     var $parent = $(this).closest("DIV"); 
     $('.normalPic', $parent).hide(); 
     $('.hoverPic', $parent).show(); 
    }); 

    $('.trad').hover(function(){ 
     var $parent = $(this).closest("DIV"); 
     $('.normalPic', $parent).show(); 
     $('.hoverPic', $parent).hide(); 
    }); 
}); 

Answer 2

これはそれを行う必要があります。

$('.contemp').hover(function(){ 
    $(this) 
     .closest('.boxShadow') 
     .children('.normalPic').hide().end() 
     .children('.hoverPic').show(); 
}); 

$('.trad').hover(function(){ 
    $(this) 
     .closest('.boxShadow') 
     .children('.normalPic').show().end() 
     .children('.hoverPic').hide(); 
}); 

これはクラス.boxShadowと、そこにその子.normalPicと.hoverPicが見つかるとその可視性を変更するから、最も近い祖先を見つけるでしょう。メソッドの連鎖を使用して同じ要素を繰り返し検索することを避ける方法に注意してください。

また、要素を終了するときに同じ関数が呼び出されることにも注意してください。 hoverの代わりに、mouseenterを使用します。コードを繰り返すことなく

---

、多分あまり直感的：

$('.contemp, .trad').mouseenter(function(){ 
    var is_contemp = $(this).hasClass('contemp'); 
    $(this) 
     .closest('.boxShadow') 
     .children('.normalPic').toggle(!is_contemp).end() 
     .children('.hoverPic').toggle(is_contemp); 
}); 

---

参考：mouseenter、closest、children、toggle、個人的にend