jquery - 如何创建 JQuery 插件

Question

所以我想开始创建 JQuery 插件并且已经开始编写一个代码。我阅读了 JQuery com 上关于如何创建一个的完整文章，但我遇到了一个问题，我在互联网上的任何地方都找不到。该插件应该从外部脚本运行，并且应该从 HTML 文档中的脚本调用，如下所示:

<script type="text/javascript">
$(function() {
    $("#JwebImageGallery").JwebImageGallery({
        Delay: 1000
    })
})
</script>

首先，我尝试从运行良好的选项中设置 ElementID(这使得 '("#JwebImageGallery")' 毫无用处)。但这不是我想要的。我希望它使用 '("#JwebImageGallery")' 作为插件将操作的 ElementID。在 JQuery 网站上的教程中，他们说你应该使用“this”，这也是我的第一个想法，但它不起作用。就像我说的，我是从外部“.js”运行它。当我警告“this”时，它返回:[ObjectHTMLDivElement]。该元素是一个 div，因此“this”似乎可以工作，但实际上却不起作用。

这是我的一些脚本:

(function( $ ) {
    $.fn.JwebImageGallery=function(o){
    o=$.extend({
        BoxID: 'JwebImageGallery',
        Delay: 5500,
        TransitionEffect: 'slide'},
    o||{});

    return this.each(function() { 

        var BoxID = this;
        window.alert(BoxID);

    // Script continues here
});

  };
})( jQuery );

我也尝试过使用但没有成功:

var BoxID = $(this);

为什么“这个”不起作用？我在很多网站上检查过我可能犯下的任何错误，但我就是无法弄清楚。

那么我怎么知道它不起作用呢？我将把我的代码放在这里:

$(BoxID).css('overflow', 'hidden');

当在选项中设置 ElementID (BoxID) 时，这段代码工作得很好，但是当我将其更改为“this”时，它就不再工作了......另外，如果我将 BoxID 设置为“JwebDesignImageGallery”这是 ID，然后它就可以工作了。

我是 JQuery 新手，所以如果你们中有人知道为什么这不起作用，那么您能否向我解释一下，也许其他人也可能有同样的问题？如果您需要更多信息，请告诉我!提前致谢!

注意:我已经包含了 JQuery 和 JQuery UI

编辑

我想要获取的ID就是这段代码中的ID:

$(function() {
        $("#JwebImageGallery").JwebImageGallery({
            Delay: 1000
        })
    })

即“#JwebImageGallery”。这就是我认为“this”会返回的结果。

Answer 1

您的困惑似乎源于this是什么。 this 代表一个 jQuery 元素。令我震惊的是您代码中的以下几行。

var BoxID = this;
window.alert(BoxID);

所以非常清楚 - this 不是传入元素的 ID。来自他们的在线文档(实际上非​​常好)

Now that we have our shell we can start writing our actual plugin code. But before we do that, I'd like to say a word about context. In the immediate scope of the plugin function, the this keyword refers to the jQuery object the plugin was invoked on. This is a common slip up due to the fact that in other instances where jQuery accepts a callback, the this keyword refers to the native DOM element. This often leads to developers unnecessarily wrapping the this keyword (again) in the jQuery function.

如果您想要传入元素的 id，那么您需要使用以下内容。

var BoxID = this.prop('id');
window.alert(BoxID);

如果你想操纵该元素

this.animate({  }); //because this is already a jQuery object

不是

$(this).animate({}); //like you might see in a typical jQuery callback