我可以在同一個插件

我有一個插件（稱爲可插拔），其採用任何.plugin，並增加了它這個標記我可以在同一個插件

<span class="colorable">color me</span>

這是我原來的標記帶class =「插件」中添加此代碼。

<div class="plugin"></div> 
<div class="plugin"></div> 
<div class="plugin"></div>

在JS，我叫$('.plugin').pluggable();它增加了上面的<span> HTML和使它看起來像這樣

<div class="plugin"><span class="colorable">color me</span></div> 
<div class="plugin"><span class="colorable">color me</span></div> 
<div class="plugin"><span class="colorable">color me</span></div>

這是所有的插件不（添加此HTML）和插件本身是簡單的像這

(function($){ 
    $.fn.pluggable = function() {  
     return this.each(function() { 
      $(this).html('<span class="colorable">color me</span>'); 
     }); 
    }; 
})(jQuery);

但是我想真正做的是，在這之後，點擊帶班.colorable跨度的時候，我希望它改變其背景顏色重新d。我可以用jQuery做類似這樣的

$('.colorable').click(function(){ 
    $this.css("background-color", "orange"); 
});

，但有沒有辦法讓整個操作是自包含有包含在同一插件的代碼。我不知道，因爲該插件運行在原始元素是.plugin類，但最終得到的彩色元素是被添加.colorable新跨越的標記。但是我想將這個操作的所有代碼保存在一個插件/文件中。可能嗎？

來源

2011-02-05 zmol

可以綁定一個.click處理器的.colorable跨越一旦被插入：

(function($){ 
    $.fn.pluggable = function() {  
     return this.each(function() { 
      $(this).html('<span class="colorable">color me</span>'); 
      $(this).find(".colorable").click(function() { 
       $(this).css("background-color", "orange"); 
      }); 
     });    
})(jQuery);

來源

2011-02-05 16:49:15 karim79

jQuery的不更換DOM函數用於創建新元素（document.createElement('tagName')），這是非常有用的學習如何與jQuery一起使用它們來更好地構建代碼。

(function($){ 
    $.fn.pluggable = function() {  
     return this.each(function() { 

      // Create the element 
      var spanElement = document.createElement('span'); 
      // Set the class 
      spanEleement.className = 'colorable'; 
      spanElement.appendChild(document.createTextNode('color me')); 
      // Add the event using jQuery 
      $(spanElement).click(function() { 
       $(this).css('background-color', 'orange'); 
      }); 
      // Append it using jQuery function 
      $(this).append(spanElement); 
      // native function for this would be element.appendChild() 

     });    
})(jQuery);

希望這有助於！

來源

2011-02-05 17:20:19 JeroenEijkhof

您可以使用此一個，

(function ($) { 
$.fn.pluggable = function() { 
    return this.each(function() { 
     var span = $('<span class="colorable">color me</span>'); 
     span.click(function(){ 
       $(this).css("background-color", "orange"); 
     }); 
     $(this).append(span); 
    }); 
}; 
})(jQuery);

任何你想要的

做的，在元素之前追加到DOM。

來源

2013-06-02 09:20:33

我可以在同一個插件

回答

相關問題