jQuery UI小工具 - 在實例變量中存儲jQuery對象

我剛剛開始編寫自己的插件，但在將jQuery對象存儲爲實例變量時遇到了一些困難。我的意思是，例如，下面的代碼：jQuery UI小工具 - 在實例變量中存儲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 
    } 
}

這兩條線我已經標記爲問題的線條不會出現執行 - 或者更確切地說，他們這樣做，但變化並不在頁面上可見。我期望看到背景顏色在第一行變灰，在第二行完全消失。它看起來像包裝函數實際上重複了元素，而重複的元素在對原始文件進行更改時保留了舊屬性。然而，我確信我在多年前使用過這個，並且它運行良好。

我使用jQuery 1.8.3和jQuery UI 1.10.4。在任何人說出來之前，我知道已經有一個jQuery UI滑塊 - 爲了保密性原因，我必須重命名該插件才能解決此問題。

我在這裏做錯了什麼？請讓我知道是否有任何其他信息我應該提供。提前致謝。

來源

2014-11-23 ClarkeyBoy

可能是被該DOM還沒有完成，當你調用加載？你有沒有嘗試設置一個超時，看看它是否有所作爲？ – 2014-11-23 01:17:38

對插件的調用在$（document）.ready（）中。我可以看到'this.container'正在使用開發工具添加到DOM中，但是在this.container上調用的任何東西都不會對DOM元素產生任何影響。無論如何，我會嘗試調用超時。 – ClarkeyBoy 2014-11-23 01:19:47

不 - 沒有用。我試過：setTimeout（function（）{ \t slider.container.effect（「highlight」，2000）; }，2000）; – ClarkeyBoy 2014-11-23 01:22:33

jQuery的包裝方法克隆的元素。下面使用容器元素的克隆版本：

$(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/

來源

2014-11-23 01:43:10 istos

非常好，謝謝istos。我認爲可能是這樣，這證實了它。我實際上找到了一種解決方法，它允許我將它作爲實例變量存儲（這樣做的目的是我可以在其他函數中快速引用它）：'this.container = $（this.element）.wrap（「

」）.parent（）;'。現在工作一個款待:)。 – ClarkeyBoy 2014-11-23 01:52:32

jQuery UI小工具 - 在實例變量中存儲jQuery對象

回答

相關問題