jQuery Mouseover DOM

Question

많은 요소가 있습니다 (모름의 총 개수). 나는이 요소들 중 어느 하나에 마우스를 올리면 나타나는 어떤 것을 원한다. (이것들은이 요소들의 공유 클래스에 바운딩 된 mouseover을 가짐으로써 처리된다.)

mouseover에 표시하고 싶은 것은 커서가 끝난 상태에 달려 있습니다. 따라서 DOM 요소를 커서 아래에두고 각 요소에 mouseover 개의 이벤트를 바인딩 할 수있는 사치없이 암호.

제안 사항?

Answer 1

HTML : (jQuery로)

<a id="say1" class="say" href="#" data-word="one">Say 'one'</a> 
<a id="say2" class="say" href="#" data-word="two">Say 'two'</a> 
<a id="say3" class="say" href="#" data-word="three">Say 'three'</a> 

자바 스크립트 : 자바 스크립트가 순수 (jQuery를하지 않고, 그것은 동일하지 않습니다)

$(document).ready(function() { 
    $('.say').mouseover(function() { 
    alert($(this).data('word')); 
    }); 
}); 

:

window.onload = function() { 
    var onmouseover = function (e) { 
    alert(e.target.getAttribute('data-word')); 
    }; 

    var elems = document.getElementsByClassName('say'); 

    for (var i = 0; i < elems.length; i += 1) { 
    elems[i].onmouseover = onmouseover; 
    } 
}; 

alert 함수를 호출하는 대신 모든 로직을 구현할 수 있습니다.

Answer 2

이벤트 위임은 여기 친구입니다.

Christian Heilmann의이 게시물 http://www.icant.co.uk/sandbox/eventdelegation/에서이 게시물을 참조하십시오.

HTH.

Answer 3

jQuery를이 .each()이 쉽게 : 그런 다음 $ (이)의 특정 특성을 확인하고 값/특성에 따라 서로 다른 일을 할 수

$('#container').bind('mouseover', function() { 
     $(".selector").each(function(){ 
       // Do something $(this) = item clicked 
       $(this).toggleClass('.example'); // Toggle class is just an example 
     }); 
}); 

.