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，所以“这个”似乎有效，但后来无效。

这是我的一些脚本：

(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”。这就是我认为“这个”会回归的原因。

Answer 1

你的困惑似乎来自于this。 this表示jQuery元素。让我感到惊讶的是你的代码中的以下几行。

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

所以要非常清楚 - this不是传入的元素的ID。来自他们的在线文档（实际上相当不错）

现在我们有了shell，我们可以开始编写实际的插件了码。但在我们这样做之前，我想谈谈背景。在插件函数的直接范围，this关键字引用调用插件的jQuery对象。这是一个常见的漏洞由于jQuery接受其他情况的事实回调，this关键字引用本机DOM元素。这个经常导致开发人员不必要地包装this关键字（再次）在jQuery函数中。

如果你想要传入元素的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

如何创建一个JQuery插件

修改

1 个答案: