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

因此，在我看来，您希望通过在调用this时正确设置opts.onChanged的范围来解决此问题。基本上，你可能希望这样做，以便插件的实现者可以做类似的事情......

$( ".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成为模态，并且实现代码可以遍历模态内部以执行任何操作。

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

1 个答案: