Question

我有一个示例代码：

<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鼠标悬停的想法？

Answer 1

在.each()循环的上下文中，this将是数组中的当前元素，即字符串，除了每个字符串将包装在一个对象中（如{ {3}}），因此您需要使用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 --------------------------------^

然后在鼠标悬停处理程序的上下文中，this是事件发生的元素，因此只需使用jQuery(this)而不是jQuery("#" + this)。把它们放在一起：

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

演示： $.each() doco page

Answer 2

当您访问this时，您不会添加#。

对于数组，我只想使用CSS选择器：

$('a, textarea, object, img, #content').mouseover(function(){
  $(this).css(...);
});

Answer 3

如果我是你，我会给那些需要鼠标功能的元素赋予一个共同的属性。比如classname或data-value属性例如：

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

如何从数组中使用jQuery鼠标悬停？

3 个答案: