Javascript对象类在单击时打开窗口进行颜色选择，并在更改时替换对象背景颜色

Javascript object class that on click opens window for colorpicking and on change replaces object background color

本文关键字：颜色对象替换选择背景单击开窗口 Javascript 更新时间：2023-09-26

我有以下对象类。getBackground方法将input type='color'的颜色值设置为等于对象bgc属性，然后打开颜色拾取窗口。之后，我想等到用户从颜色拾取窗口设置新的颜色值，并将object.bgc值更改为等于颜色拾取窗口的新值。

function Textclass(id){
                this.id = id;
                this.bgc = '#ff33cc';
                var self = this;
                this.render = function(){
                    var el = $('<div/>');
                    el.attr('id', this.id);
                    el.text('change-color');
                    el.addClass('box draggable');
                    el.css('background-color', this.bgc);
                    el.appendTo('#container');
                    el.on('dblclick', function(){
                        self.getBackground();
                        self.setBackground();
                    });
                };
                this.getBackground = function(){
                   var color = self.bgc;
                    $('#colorp').val(color);
                   $('#colorp').click();
                   // this line initiates before the change of color picker value
                   self.bgc = $('#colorp').val();
                };
                this.setBackground = function(){
                   $('#' + self.id).css("background-color",self.bgc);
                };
            }

所以我想要像这样的东西

this.getBackground = function(){
                       var color = self.bgc;
                        $('#colorp').val(color);
                       $('#colorp').click();
                       //wait for new value picked from the colorpicking window
                       // on button 'ok' clicked from colorpicking window get the new value and set object.bgc = this new value
                    };

这里onchange事件应该在颜色选择器上注册。另外，我猜你使用的是HTML5颜色类型。

请找到https://jsfiddle.net/rv5atgw5/.

function divColor(e){
    var val = event.target.value;
    document.querySelector("#divId").style.backgroundColor = val;
}

在您的示例中，在getBackgroundColor API中，像这样给colorpicker附加一个onchange处理程序。

 this.getBackground = function(){
      var color = self.bgc;
      var colorp = $('#colorp');
      colorp.val(color);
      colorp.on('change',function(){
         self.bgc = $(this).val();               
      });          
      colorp.click();
 };

希望这能帮到你。