将数据传回给jQuery插件的调用者元素

Question

作为学习js的练习，我为jQuery构建了一个颜色选择器插件。我有一个显示的自举模式（点击我）。当在模态中选择颜色时，我想将按钮（打开模态的按钮）背景设置为在模态中单击的按钮。我无法弄清楚如何访问父级，而不诉诸于使用唯一的ID或任何其他引导功能。

这里是我到目前为止（对不起，不可能得到的jsfiddle加载）插件代码：

(function($) { 
    "use strict"; 

    $.fn.colorpicker = function(options) { 


     var opts = $.extend({}, $.fn.colorpicker.defaults, options); 
     var colorContainer = $('<ul/>').attr('id', 'container'); 
      $(opts.colors).each(function(index) { 
       colorContainer.append('<button style="background-color: ' +this+ ' "> &nbsp; </button>'); 
      }); 

     var $modalHtml = $('<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> '+ 
          '<div class="modal-dialog modal-sm">' + 
           '<div class="modal-content" id=modal-colors> ' + 
           '</div> ' + 
          '</div> ' + 
         '</div>'); 
     $modalHtml.find('#modal-colors').append(colorContainer); 
     $modalHtml.on('click', 'button' , function(){opts.onChanged($(this).attr('style'));}) 
     this.parent().append($modalHtml); 
     return this.each(function(index){ 
      $(this).attr("id","color-picker-" + index); 
      $(this).attr("data-toggle","modal"); 
      $(this).attr("data-target",".bs-example-modal-sm"); 
     }); 
    }; 




}(jQuery)); 

    $.fn.colorpicker.defaults = { 
     colors : ["#000000", "#1A0000", "#330000", "#4C0000", "#660000", "#800000", "#990000"], 
     onChanged: function(rgb){} 
}; 

，因此被称为：

<script type="text/javascript"> 
    $(".colorpicker").colorpicker({onChanged:function(color){ 
     console.log(color) 
    }}); 

    </script> 

http://joe-riggs.com/color/

任何其他代码的批评欢迎，谢谢！

Answer 1

所以在我看来，你想通过在opts.onChanged的呼叫中正确设置this的范围来解决这个问题。基本上，你会希望让这个插件的实现者可以这样做......

$(".colorpicker").colorpicker({onChanged:function(color){ 
    $(this).css('background-color', color); 
}}); 

为了使这项工作，你需要使用https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call。像

$.fn.colorpicker = function(options) { 
    $(this).each(function(){ 
     var self = this; 
     var opts = $.extend({}, $.fn.colorpicker.defaults, options); 
     var colorContainer = $('<ul/>').attr('id', 'container'); 
      $(opts.colors).each(function(index) { 
       colorContainer.append('<button style="background-color: ' +this+ ' "> &nbsp; </button>'); 
      }); 

     var $modalHtml = $('<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"> '+ 
          '<div class="modal-dialog modal-sm">' + 
           '<div class="modal-content" id=modal-colors> ' + 
           '</div> ' + 
          '</div> ' + 
         '</div>'); 
     $modalHtml.find('#modal-colors').append(colorContainer); 
     $modalHtml.on('click', 'button' , function(){ 
      opts.onChanged.call(self, $(this).attr('style')); 
     }); 
     this.parent().append($modalHtml); 
     return this.each(function(index){ 
      $(this).attr("id","color-picker-" + index); 
      $(this).attr("data-toggle","modal"); 
      $(this).attr("data-target",".bs-example-modal-sm"); 
     }); 
    }); 
}; 

这样的东西会让这个this给onChanged回调的内部是模态，以及实现代码可以在模式到为所欲为的内部穿越。