懸停的所有元素更改模塊化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