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