2

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

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

首先，我尝试从运行良好的选项中设置 ElementID（这使得 '("#JwebImageGallery")' 无用）。然而，这不是我想要的。我希望它使用 '("#JwebImageGallery")' 作为插件随后将操作的 ElementID。在 JQuery 网站上的教程中，他们说你应该使用“this”，这也是我的第一个想法，但是它不起作用。就像我说的那样，我从外部“.js”运行它。当我警告“this”时，它会返回：[ObjectHTMLDivElement]。Element 是一个 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”。这就是我认为“这个”会回归的东西。

4

1 回答 1

2

你的困惑似乎来自于什么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
于 2013-01-31T16:28:46.450 回答