javascript - 将箭头添加到 div jQuery 插件问题

Question

我只想在 div 中添加 4 个箭头：

我让它工作：http: //jsfiddle.net/ctNDr/

但是当我尝试制作一个 jquery 插件时，它会出错：http: //jsfiddle.net/DY3EJ/

这是输出：

<img class="arrows" src="arrow-top.png" alt="Arrow-Top" style="height: 26px; width: 20px; top: 50px; left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-right.png" alt="Arrow-Top" style="position: absolute; display: none;">
<img class="arrows" src="arrow-bottom.png" alt="Arrow-Top" style="left: 480480px; position: absolute; display: none;">
<img class="arrows" src="arrow-left.png" alt="Arrow-Top" style="height: 20px; width: 26px; top: 50250px; left: 480px; position: absolute; display: none;">

任何的想法？

Answer 1

看看插件创作指南。您需要像这样设置插件的名称，$.fn.yourplugin

(function( $ ){

  $.fn.myPlugin = function() {

    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){

      // the this keyword is a DOM element

    });

  };
})( jQuery );

Answer 2

您遇到了几个问题，但我最终能够让它工作。我删除了该this.each()功能，因为它没有任何用途。此外，您的顶部、右侧、底部、左侧计算需要包含在括号中。出于视觉目的，在 jsFiddle 中，我上课，.arrows { background-color: red; }因为我没有任何图像要处理。

注意事项：

1. options.MouseOver从未使用过。

2. options.Fade并且由于您在插件中处理的方式而options.FadeSpeed基于第一次调用。.AddArrow().hover()

3. 您可能需要考虑.stop(true,true)在悬停时调用淡入/淡出之前添加以消除动画排队。

---

点击这里查看 jsFiddle 演示：

(function( $ ){

    $.fn.AddArrow = function(options) {

        var defaults = {
            ArrowHeight: '32',
            ArrowWidth: '32',
            ArrowPath: 'images/arrow.png',
            Orientation: 'Top',
            Fade: true,
            FadeSpeed: 300,
            MouseOver: true            
        };

        var o = $.extend(defaults, options);
        var pos = this.position();
        var width = this.width();
        var height = this.height();

        switch (o.Orientation) {
            case "Top":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Top",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+pos.top+"px; left: "+((width / 2) + pos.left)+"px; position: absolute; display: none;"
                }));
                break;
            case "Right":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Right",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height / 2))+"px; left: "+(width + (pos.left - o.ArrowWidth))+"px; position: absolute; display: none;"
            }));
                break;
            case "Bottom":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Bottom",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height - o.ArrowHeight))+"px; left: "+((width / 2) + pos.left)+"px; position: absolute; display: none;"
                }));
                break;
            case "Left":
                this.append($('<img>', { 
                    src: o.ArrowPath, 
                    alt: "Arrow-Left",
                    class: "arrows",
                    style: "height: "+o.ArrowHeight+"px; width: "+o.ArrowWidth+"px; top: "+(pos.top + (height / 2))+"px; left: "+pos.left+"px; position: absolute; display: none;"
                }));
                break;
        }

        if(o.Fade) {         
            this.hover(function() {
                $(".arrows").fadeIn(o.FadeSpeed);
            }, function() {
                $(".arrows").fadeOut(o.FadeSpeed);
            });
        }

    }

})( jQuery );