마우스 오버시 여러 스팬을 구별하는 방법은 무엇입니까?

Question

발신자와 수신자의 이름에 마우스를 올리면 이메일 ID를 가져와야하는 Chrome 확장 프로그램을 만들고 있습니다.

나는 DIV 클래스 이름을 사용하여 마우스 오버하여 보낸 사람의 이메일 ID를 받고 있어요 : 'GD는'emai-ID를 포함하는 DIV 클래스입니다 var exp = $(".acZ").find(".gD")을.

리시버에도 동일하게 적용되지만 리시버의 div에는 리시버의 각 span 태그가있는 여러 개의 span 태그가 있습니다. 그래서 문제는 제가 mouseover 할 때 같은 div 클래스 아래에있는 모든 ID를 분리 할 수 ​​없다는 것입니다 : var exp1 = $(".xD").find(".g2"). 모든 수신자는 스팬 태그가있는 'g2'클래스 아래에 있습니다.

그래서 span 태그를 어떻게 구별 할 수 있습니까?

Answer 1

mouseover 이벤트에서 event.target을 사용하여 이벤트가 트리거 된 DOM 요소에 대한 참조를 가져올 수 있습니다.

<div class="xD"> 
    <span class="g2" id="r1">Test1</span> 
    <span class="g2" id="r2">Test2</span> 
    <span class="g2" id="r3">Test3</span> 
    <span class="g2" id="r4">Test4</span> 
</div> 

<script language="javascript"> 
    $(".xD").find(".g2").mouseover(function(event) 
    { 
    console.log("Concerned id " + $(event.target).attr("id")); 
    }) 
</script> 

개발자 콘솔을 사용하도록 설정하고 확인하려면 출력물을 확인하십시오.

희망 사항을 명확히 할 수 있었으면 좋겠다.