jQuery插件：选项失败

Question

我创建了这个jquery插件，但我的选项对于每个实例都是相同的。 背景是不透明的：.9

演示：http://jsfiddle.net/Yh2ET/2/

我该如何解决这个问题？

Answer 1

解释

您的问题是您没有实例化每个设置，而是全面共享相同的设置。为了使每个实例都有自己的设置，您需要：

定义插件范围内的默认值，这意味着每个实例都有自己的设置 或
您可以学习如何使用对象构造函数。这同样适用，但允许您保留大部分代码，并进行一些小的调整。

要了解有关对象构造函数的更多信息，请click here。

---

如何完成

首先，我们将默认值更改为函数，而不是对象。 我们在这里做的是将对象属性分配给函数本身。

$.fn.linkZoomIcon.defaults = function(){
    this.sSpanClass = "linkZoomSpan";
    this.background = {
        css:{
            'opacity': .5
        },
        class: 'linkZoomOverlayBackground'
    };
    this.icon = {
        css:{},
        class: 'linkZoomOverlayIcon'
    };
};

然后，在插件范围内，我们这样做是为了创建该对象的实例。

$.fn.linkZoomIcon = function(options){
    var oSettings = $.extend(true, new $.fn.linkZoomIcon.defaults, options);
    ......
}

现在我们为每个实例提供了单独的选项。

---

更新日志

• 删除了容器和容器类。
• 删除了容器的默认选项。
• 删除了.each，这是当前使用所必需的。

• 现在，叠加层和图标应相对于锚​​点定位，其中的CSS为：

  a{
      position: relative;
      display: inline-block;
  } 
  

• 我不是让JQuery为我创建元素，而是直接用document.createElement给它一个，它应该会提高性能。

• 而不是hover事件，它是mouseenter和mouseleave的简写，我直接使用它们。
• 现在，在初始化时创建缩放图标和背景元素，而不是每次触发mouseenter。事件只显示和隐藏元素。
• 编辑已添加oSettings.sSpanClass，以便链接中的其他跨度不会受到影响。
• 编辑更正了JSFiddle解决方案中的CSS。

---

解决方案

你走了：Solution in JSFiddle，
这是完整的代码。

的Javascript

(function($) {
    $.fn.linkZoomIcon = function(options)
    {
        var oSettings = $.extend(true, new $.fn.linkZoomIcon.defaults, options);

        var jImage = $("img:first", this);
        var iWidth = jImage.width(),
            iHeight = jImage.height();

        //Background overlay
        var eBg = $(document.createElement("span"));
        eBg.addClass(oSettings.background.class)
           .addClass(oSettings.sSpanClass)
           .width(iWidth).height(iHeight)
           .css(oSettings.background.css)
           .hide();
        $(this).append(eBg);

        //Zoom icon
        var eIco = $(document.createElement("span"));
        eIco.addClass(oSettings.icon.class)
            .addClass(oSettings.sSpanClass)
            .css(oSettings.icon.css)
            .hide();
        $(this).append(eIco);

        $(this).mouseenter(function(){
            $("span."+oSettings.sSpanClass, this).show();
        }).mouseleave(function () {
            $("span."+oSettings.sSpanClass, this).hide();
        });
    };

    $.fn.linkZoomIcon.defaults = function(){
        this.sSpanClass = "linkZoomSpan";
        this.background = {
            css:{
                'opacity': .5,
            },
            class: 'linkZoomOverlayBackground'
        };
        this.icon = {
            css:{},
            class: 'linkZoomOverlayIcon'
        };
    };

})(jQuery);

$(document).ready(function ()
{
    $('a.linkZoomOverlay').linkZoomIcon({background: {css:{'opacity': .2}}});
    $('a.linkZoomOverlayB').linkZoomIcon({background: {css:{'opacity': .9}}});    

});

快乐的编码！

Answer 2

我认为这就像将var opts = $.extend(true, $.fn.linkZoomIcon.defaults, options);移动到悬停功能内部一样简单，但是当图像并排时，如果浏览器窗口很窄，我也会遇到问题。虽然图像是垂直渲染的，但似乎有效，尽管您使用共享选项描述了这个问题。

我在代码中玩了一下并创建了demo fiddle，这似乎对我在Chrome中有用。 <a>被赋予position:absolute和display:inline-block，并且叠加背景和图标相对于锚定位。我还删除了容器元素，因为我认为这是不必要的。它可能不是你想要的，但我希望它有所帮助。

HTML

<a href="#" class="linkZoomOverlay">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
</a>
<a href="#" class="linkZoomOverlayB">
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" />
</a>

CSS

.linkZoomOverlayBackground {
    background:black;
    position:absolute;
    top:0;
    left:0;
}

.linkZoomOverlayIcon {
    background:url('http://het-stro-buro.f8development.be/frontend/themes/het-stro-buro/core/layout/images/linkZoomIcon.png') no-repeat center center;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}

的JavaScript

(function($) {
    $.fn.linkZoomIcon = function(options) {

        return this.each(function() 
        {
            var $this = $(this);
            $this.hover(function () {
                $this.css({position:'relative', display:'inline-block'});
                var opts = $.extend(true, $.fn.linkZoomIcon.defaults, options);
                var image = $this.find('img:first');
                var elBackground = $('<span>').addClass(opts.background.class);
                var elIcon = $('<span>').addClass(opts.icon.class);

                elBackground.width(image.width()).height(image.height())

                // Styling
                elBackground.css(opts.background.css);
                elIcon.css(opts.icon.css);

                $(this).prepend(elIcon);
                $(this).prepend(elBackground);
            }, function () {
                $this.removeAttr('style');
                $this.find('span').remove();
            }); 
        });
    };

    $.fn.linkZoomIcon.defaults = {
        background:{ 
            css:{
                'opacity': .5
            },
            class: 'linkZoomOverlayBackground'
        },
        icon:{ 
            css:{},
            class: 'linkZoomOverlayIcon'
        }
    };

})(jQuery);

$(document).ready(function () {
    $('a.linkZoomOverlay').linkZoomIcon({background: {css:{'opacity': .1}}});
    $('a.linkZoomOverlayB').linkZoomIcon({background: {css:{'opacity': .7}}});    
});