悬停的所有元素更改模块化jquery

Question

我正在试验模块，我不确定如何以这种方式更改悬停事件的范围。正如你可能猜到的那样，我只想要我改变的形象。任何帮助将不胜感激:)它可能会很明显，但我从字面上不能想到如何解决它。

console.log(this.$itemIcon); 

回报[img, img, img, img, prevObject: m.fn.init(4), context: document, selector: ".work-item img"]

在那里我试图返回[img, context: img]

这里是我的代码缩短版本：

(function() { 

    var set = { 
     init: function() { 
      this.cacheDom(); 
      this.bindEvents(); 
     }, 
     cacheDom: function() { 
      this.$item = $(".work-item"); 
      this.$itemIcon = this.$item.find("img"); 
     }, 
     bindEvents: function() { 
      this.$itemIcon.hover(growShrink.grow.bind(this), growShrink.shrink.bind(this)); 
     }, 
    }; 

    var growShrink = { 
     grow: function() { 
      this.$itemIcon.animate({height: "+=10px"}, 100); 
     }, 
     shrink: function() { 
      this.$itemIcon.animate({height: "-=10px"}, 100); 
     } 
    }; 

    set.init(); 

})(); 

JS Fiddle

我想使其功能与此相同。

$(".work-item").find("img").hover(function(){ 

    $(this).animate({height: "+=10px"}, 100); 

}, function(){ 
    $(this).animate({height: "-=10px"}, 100); 
}); 

Answer 1

我猜你总是试图让每个图像单独变化。但是，当你做this.$item = $(".work-item");你告诉jQuery找到所有<div class="work-item" />这就是为什么当你徘徊一个所有人都改变。

你需要做一个for each loop，然后绑定事件

bindEvents: function() { 
    this.$itemsIcons.each(function() { 
    var $icon = $(this); 

    $icon.hover(animations.grow.bind($icon), animations.shrink.bind($icon)); 
    }); 
}, 

JS Fiddle