Question

我有一个插件（称为可插件），它接受任何.plugin并添加此标记

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

这是我的原始标记，带有class =“plugin”。

<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的span时，我希望它将其背景颜色更改为红色。我可以像这样使用jquery来做到这一点

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

但有没有办法让这个代码包含在同一个插件中，以便整个操作是自包含的。我想知道，因为插件操作的原始元素是类.plugin，但最终被着色的元素是添加.colorable的新跨度标记。但我想在一个插件/文件中保留此操作的所有代码。可能吗？

Answer 1

一旦.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 );处理程序绑定到其中：

{{1}}

Answer 2

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 );

希望这有帮助！

Answer 3

你可以使用这个，

(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之前，做任何你想做的事。

我可以在同一个插件中添加此代码吗？

3 个答案: