Question

这是我的HTML代码：

<div id="staticlinks">
<a class="thumb" href="https://www.facebook.com/" target="_blank"><img src="images/facebook.png"/></a>
<a class="thumb" href="https://www.twitter.com/" target="_blank"><img src="images/twitter.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/youtube.png" /></a>
<a class="thumb" href="https://www.youtube.com/" target="_blank"><img src="images/feed.png" /></a>
<a class="thumb" href="https://www.google.com/" target="_blank"><img src="images/google.png" /></a>

</div>

这是jQuery代码：

$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(".thumb img", this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(".thumb img", this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);

问题是当我从$(".thumb img", this)删除'this'时，所有图片都会被动画化。如果我把它放在这里，那么动画就不会发生。我没有遇到问题。

Answer 1

$(".thumb img", this)表示“查找.thumb中的所有this元素，然后找到所有后代img元素”。您只想查找img中的所有this元素，因为this 是.thumb元素。

您需要做的就是$('img', this)。

请注意，使用find代替它会更直观（ minly 更快！）。

$(this).find('img')

这意味着完全相同的东西，但我认为，它更容易阅读。

Answer 2

$(function(){
  $('.thumb').on('mouseenter mouseleave', function( e ){
      var size = e.type=='mouseenter' ? 80 : 60 ;
      $("img", this).animate({height: size , width: size }, 800);
  });
});

您的处理程序已经指向.thumb个<a>元素，而不是您再次指向".thumb img", this，其中this不再相关。
现在，通过"img", this，您实际上是在说"img", children of THIS hovered，它将按预期工作。
上面是实现同样目标的好方法。

Answer 3

$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);

Answer 4

使用$("img", this);而不是$(".thumb img", this) img下的每个this都会占据.thumb。

Answer 5

试试这个：

$("img", this)

你正在徘徊.thumb所以你应该这样做。

或者这样：

$(this).find('img').animate({....})

Answer 6

什么是“这个”？

在许多面向对象的编程语言中，这个（或者自我）是一个可以在实例方法中使用的关键字来引用该对象已调用当前正在执行的方法。

（来自Wikipedia）

在jQuery中，this引用了一个DOM元素：

$('.thumb').hover(function() {
    // $(this) refer to $('.thumb')
});

或对象：

function foo(element) {
    this.a = 'a'; // Refer to object

    element.each(function() {
         $(this).css('color', 'red');

        // now this refer to current element of each, which is a DOM element
    })
}

如何在jQuery中使用'this'？

6 个答案: