所有元素在悬停时发生变化 Jquery

Question

我正在试验模块，但不确定如何以这种方式更改悬停事件的范围。正如您可能猜到的那样，我只想更改悬停在上方的图像。任何帮助将不胜感激:)它可能会非常明显，但我真的想不出如何解决它。

console.log(this.$itemIcon);

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

我正在尝试 return [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

所有元素在悬停时发生变化 Jquery

All Elements Changing on Hover Modular Jquery

jquery

module

elements

hover