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

所有元素在悬停模块化Jquery上发生变化

1 个答案: