jQuery Mouseover DOM

Question

我有一些元素（我不知道的总数）。当我将这些元素中的任何一个（通过绑定这些元素的共享类来绑定mouseover）时，我希望出现一些东西。

但是，我想要出现在mouseover上的东西取决于游标的结果 - 所以我需要获取游标下的DOM元素，而没有奢侈的能够将mouseover事件绑定到码。

有什么建议吗？

Answer 1

HTML：

<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> 

的JavaScript（用jQuery）：

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

纯JavaScript（不包括jQuery的，它是不相等）：

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 
     }); 
}); 

然后，您可以检查$（本）某些特征，然后以此为基础进行的值/特性不同的东西。