2

我有一个示例代码：

<a href=""></a>
<textarea></textarea>
<object></object>
<img src="" />
<div id="content"></div>

我用过这个：

jQuery("a").mouseover(function() {
    alert();
 });
 jQuery("textarea").mouseover(function() {
    alert();
 });
 jQuery("object").mouseover(function() {
    alert();
 }); 
 jQuery("img").mouseover(function() {
    alert();
 });
 jQuery("#content").mouseover(function() {
    alert();
 });

我可以用这个吗？

var object = ["a","textarea","object","img", "content"]; 
jQuery.each(object, function() {
   jQuery(this).mouseover(function(){
      alert();
   });  
});

如何从数组中使用 jQuery mouseover 的想法？

4

3 回答 3

3

在.each()循环的上下文中，this将是数组中的当前元素，即一个字符串，除了每个字符串将被包装在一个对象中（如文档页中所述），因此您需要使用： $.each()this.toString()

jQuery(this.toString()).mouseover(function(){

...然后它将具有与 相同的效果jQuery("a")，jQuery("textarea")依此类推。只要每个字符串都是有效的选择器，它就会起作用。或者，更好的是，利用 jQuery 传递给您的函数的参数：

jQuery.each(object, function(i, val) {
   jQuery(val).mouseover(function(){

数组中的最后一个元素是一个id，所以它需要一个#：

var object = ["a","textarea","object","img", "#content"];
// add # here --------------------------------^

然后在 mouseover 处理程序的上下文中，this是事件发生的元素，所以只需使用jQuery(this)而不是jQuery("#" + this). 把所有这些放在一起：

jQuery.each(object, function(i, val) {
   jQuery(val).mouseover(function(){
       jQuery(this).css(...);           
   });  
});​

演示：http: //jsfiddle.net/GBtFY/

于 2012-11-24T03:49:43.353 回答
1

当您访问时，this您不会预先添加#.

至于数组，我只会使用 CSS 选择器：

$('a, textarea, object, img, #content').mouseover(function(){
  $(this).css(...);
});
于 2012-11-24T03:49:03.733 回答
0

如果我是你，我会给那些需要鼠标悬停功能的元素一个共同的属性。像类名或数据值属性。
例如：

<a href="" data-hover="true"></a>
<textarea data-hover="true" ></textarea>
<object data-hover="true" ></object>
<img data-hover="true" src="" />
<div data-hover="true" id="content"></div>


<script type="text/javascript">
$(document).ready(function(){
    $('[data-hover]').bind('mouseover', function(){
        alert('Completed');
    });
});
</script>
于 2012-11-24T04:02:53.213 回答