2

这是我的 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');
    }
  );
}
);

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

4

6 回答 6

2

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

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

请注意，使用它会更直观（而且速度更快！）find。

$(this).find('img')

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

于 2013-02-10T17:19:15.880 回答
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

于 2013-02-10T17:20:18.773 回答
2 
$(document).ready(
function(){
  $('.thumb').hover(
    function(){
      $(this).animate({height: '80px' , width:'80px'}, 'slow');
    }, function(){
      $(this).animate({height: '60px', width: '60px'}, 'slow');
    }
  );
}
);
于 2013-02-10T17:21:27.750 回答
1

使用$("img", this);而不是$(".thumb img", this)它会占用每个imgunder this，这是悬停的.thumb。

于 2013-02-10T17:19:34.817 回答
1

试试这个：

$("img", this)

你正在悬停，.thumb所以你应该这样做。

或者这样：

$(this).find('img').animate({....})
于 2013-02-10T17:19:44.187 回答
1

这是什么”？

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

（来自维基百科）

在 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
    })
}
于 2013-02-10T17:22:22.887 回答