Javascript 将数据传回jQuery插件'；s调用者元素

作为学习js的练习，我正在为jQuery构建一个颜色选择器插件。我有一个显示的引导模式（单击我）。当在模式中选择颜色时，我想将按钮（打开模式的按钮）背景设置为在模式中单击的按钮。我不知道如何在不使用唯一id或任何其他引导功能的情况下访问父级

以下是我到目前为止（抱歉，无法加载JSFIDLE）的插件代码：

(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){}
};

（函数（$）{
“严格使用”；
$.fn.colorpicker=函数（选项）{
var opts=$.extend（{}，$.fn.colorpicker.defaults，options）；
var colorContainer=$（'
'）.attr（'id'，'container'）；
$（选项颜色）。每个（函数（索引）{
colorContainer.append（“”）；
});
变量$modalHtml=$（“”+
'' +
' ' +
' ' +
' ' +
'');
$modalHtml.find（“#模态颜色”）.append（colorContainer）；
$modalHtml.on（'click'，'button'，function（）{opts.onChanged（$（this.attr（'style'））；}）
this.parent（）.append（$modalHtml）；
返回此.each（函数（索引）{
$（this.attr（“id”，“颜色选择器-”+索引）；
$（this.attr（“数据切换”、“模式”）；
$（this.attr（“数据目标“，”.bs示例模态sm”）；
});
};
}（jQuery））；
$.fn.colorpicker.defaults={
颜色：[“000000”、“10000”、“330000”、“40000”、“660000”、“800000”、“990000”]，
onChanged:function（rgb）{}
};

因此被称为：

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

  </script>

$（“.colorpicker”）.colorpicker（{onChanged:function（color）{
console.log（彩色）
}});

---

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

因此，在我看来，您可能希望通过在调用

opts.onChanged

时正确设置

this

的范围来解决此问题。基本上，您希望这样做，以便插件的实现者可以执行以下操作

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

为了让它工作，你需要使用。差不多

$.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");
      });
  });
};

$.fn.colorpicker=函数（选项）{
$（this）.each（function（）{
var self=这个；
var opts=$.extend（{}，$.fn.colorpicker.defaults，options）；
var colorContainer=$（'
'）.attr（'id'，'container'）；
$（选项颜色）。每个（函数（索引）{
colorContainer.append（“”）；
});
变量$modalHtml=$（“”+
'' +
' ' +
' ' +
' ' +
'');
$modalHtml.find（“#模态颜色”）.append（colorContainer）；
$modalHtml.on（'click'，'button'，function（）{
opts.onChanged.call（self，$（this.attr（'style'））；
});
this.parent（）.append（$modalHtml）；
返回此.each（函数（索引）{
$（this.attr（“id”，“颜色选择器-”+索引）；
$（this.attr（“数据切换”、“模式”）；
$（this.attr（“数据目标“，”.bs示例模态sm”）；
});
});
};

---

这将使onChanged回调中的

This

成为模态，实现代码可以遍历模态内部以执行它想要的任何操作。

TypeError:This.find（…）.style不是函数。经过一些研究，我想知道我是否需要重新考虑我的插件模型-这看起来很有希望，想法？对不起，我有一个小的打字错误。它应该是

.css

而不是

.style

。我正在更新答案。对于你在SM上的链接-同样的范围界定问题也会存在，尽管一般来说，遵循更好的插件开发惯例是有意义的。也许我在某个地方有一个打字错误，但是您的代码似乎正在更新模式按钮中的颜色，而不是原始按钮callerI一定误解了您的问题。编写此代码是为了更改模式按钮的背景色。“按钮调用者”是指

.colorpicker

。我正在更新我的答案以实现这一点。