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

pass data back to a jQuery Plugin's caller element

本文关键字：调用者元素插件 jQuery 数据更新时间：2023-09-26

作为学习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/

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

所以在我看来，您希望通过在调用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");
      });
  });
};

这将使 onChanged 回调内部的this是模态，并且实现代码可以在模态内部遍历以执行任何它想要的操作。