Question

我刚刚开始编写自己的插件，但我在将jQuery对象存储为实例变量方面遇到了一些困难。我的意思是，例如，在下面的代码中：

$.widget("ns.slider", {
    options: {
        "selector": "li",
        "selected": 0,
        "delay": 1000
    },
    _create: function() {
        var slider= this;
        this.element.addClass("slider");
        this.container = $("<div class=\"slider-container\"></div>");
        this.container.height($(this.element).height());
        $(this.element).wrap(this.container).css({
            "position": "absolute",
            "top": 0,
            "left": 0,
            "right": 0
        });
        this.container.css({"position": "relative", "overflow": "hidden", "backgroundColor": "#CCC"}); // Problem line
        this.container.remove(); // Also problem line
    }
}

我标记为问题行的两行似乎不会执行 - 或者说它们会执行，但更改在页面上不可见。我希望看到背景颜色在第一行变灰并在第二行完全消失。似乎wrap函数实际上复制了元素，而复制元素在对原始元素进行更改时会保留旧属性。然而，我确信在此之前，多年前我已经使用过它，并且它运行良好。

我在jQuery UI 1.10.4中使用jQuery 1.8.3。在有人说之前，我知道已经有一个jQuery UI滑块 - 出于保密原因，我不得不为了这个问题的目的重命名该插件。

我在这里做错了什么？如果我应该提供任何其他信息，请告诉我。提前谢谢。

Answer 1

jQuery＆＃39> wrap 方法克隆元素。以下使用容器元素的克隆版本：

$(this.element).wrap(this.container) // `this.container` is cloned first

当您尝试在事后应用样式时，这些样式将应用于未附加到DOM的非克隆版本。

您可以通过在包装元素之前添加样式来解决此问题：

container.css({"position": "relative", "overflow": "hidden", "backgroundColor": "#CCC"});
$(this.element).wrap(this.container)

另请注意，调用删除并不会删除任何内容，因为只有克隆的容器已附加到DOM。而是通过将其设置为 null 来清理它。

container = null;

这是一个JSFiddle：http://jsfiddle.net/0db32Lzh/

jQuery UI Widgets - 将jQuery对象存储在实例变量中

1 个答案: