我可以在同一个插件

我有一个插件（称为可插拔），其采用任何.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

我可以在同一个插件

回答

相关问题