javascript - 自定义 jQuery 方法独立作用于元素的每个实例

Question

我创建了一种方法，可以在鼠标悬停时在图像的一侧显示黑条。当它只有一个图像时一切都很好，但是当应用于多个图像时，如果鼠标悬停在两个图像上，黑条就会出现。

是否可以让每张图片彼此独立操作，以便鼠标悬停事件仅激活该特定图片的黑条？

---

jsFiddle - http://jsfiddle.net/7kw8z/11/

---

我通过 $("img.edit").panzoom();

调用方法

这是方法:

!function($){


$.fn.panzoom = function() {
    var $this = $(this);
    this.imagesLoaded(function(){

        $this.wrap('<div class="img_wrapper" />');

        var imgEl = $this.parent(".img_wrapper");

        imgEl.width($this.width());
        imgEl.height($this.height());
        //imgEl.offset({top:$this.offset().top,left:$this.offset().left});

        imgEl.append('<div class="img_menu" />');
        menuEl = imgEl.children(".img_menu");


        imgEl.hover(function() {
            $(menuEl).css("visibility", "visible");
        },  function() {
            $(menuEl).css("visibility", "hidden");
        });

    });
}

}(window.jQuery);

Answer 1

你可以做到

$.fn.panzoom = function() {
return this.each(function(){
    var $this = $(this);
    $this.imagesLoaded(function(){
        $this.wrap('<div class="img_wrapper" />');

        var imgEl = $this.parent(".img_wrapper");

        imgEl.width($this.width());
        imgEl.height($this.height());

        imgEl.append('<div class="img_menu" />');
        var menuEl = imgEl.children(".img_menu");

        imgEl.hover(function() {
            menuEl.css("visibility", "visible");
        },  function() {
            menuEl.css("visibility", "hidden");
        });
    });
});
}     

http://jsfiddle.net/7kw8z/21/