子孫の要素を選択する

Question

私はそのクラスをオンとオフに切り替えることができるようにリスト内のimg要素を選択するのに苦労しています。 私はそれを選択する方法を変えましたが、リストの2番目または3番目の... divにマウスオーバーしても、リストの最初の画像が点灯します。

<ul> 
    <li> 
    <div class="container" onmouseover="toggleImgColor()" onmouseout="toggleImgColor()"> 
     <div class="container-title"> 
     <h3 class="title /> 
     <img id="pic" class="greyImg" /> 
     </div> 
     ... 
    </div> 
    </li> 
    ... 
</ul> 

Javascriptを

function toggleImgColor() { 
    $(this).find("img").toggleClass("greyImg"); 
} 

Answer 1

あなたはこのような何かがあることを行うことができます。

$(document).ready(function(){ 
    $(".container").hover(function() { 
     $("#pic").toggleClass("greyImg"); 
    }); 
}); 

Answer 2

はHTMLだけでtoggleImgColor()内部thisようtoggleImgColor(this)を渡し、JavaScript関数にパラメータとしてそれをキャッチ。これにより、現在ホバリングされたDOMオブジェクトがtoggleImgColor関数に渡され、それを使ってその特定のdivを表示することができます。

HTML：

<ul> 
    <li> 
    <div class="container" onmouseover="toggleImgColor(this)" onmouseout="toggleImgColor(this)"> 
     <div class="container-title"> 
     <h3 class="title /> 
     <img class="greyImg" /> 
     </div> 
     ... 
    </div> 
    </li> 
    ... 
</ul> 

はJavaScript：

function toggleImgColor(item) { 
    $(item).find("img").toggleClass("greyImg"); 
}