0

我想立即显示带有颜色变化的插件输出预览。为了从输入文本中获取值，我将使用

  • 键位
  • 改变了
  • 点击

功能。

但是如果颜色选择器用户正在与颜色选择器交互，所以上述功能不起作用，显然它只有在用户聚焦或输入一些输入时才会起作用，所以我使用了这个setInterval功能

setInterval(function () {
    var h = jQuery('#bgcolor').val();
    jQuery(".bat-gh").css("background", h);
}, 100);

这工作得很好，我可以显示用户正在选择的输出。

这是我的问题：

  1. 这会给我的插件带来额外的负担或负载或使浏览器无响应吗？
  2. 用户更改时显示颜色值的任何其他替代方法？
4

4 回答 4

2

您可以添加 onChange 事件。 

var myOptions = {
    // a callback to fire whenever the color changes to a valid color
   -----> change: function(event, ui){}, <-----------------------
    };

$('.my-color-field').wpColorPicker(myOptions);
于 2013-08-29T15:33:11.970 回答
2

我很惊讶没有人直接使用 ui 对象。就我而言，更改侦听器 + jQuery 选择器并没有让我得到更新的颜色值。为此，我必须执行以下操作：

$('.my-color-field').wpColorPicker({
  change: function(event, ui){
    var theColor = ui.color.toString();
  } 
});
于 2016-09-19T22:32:43.157 回答
1

当您可以在值更改时更新颜色时，无需弄乱间隔。并且由于它与 setInterval 一起使用，因此它必须进行更改，并且当您单击颜色时，插件将更新此值。所以：

jQuery('#bgcolor').change(function(){
    jQuery(".bat-gh").css( "background", $(this).val() );
});

应该这样做。

于 2013-08-29T15:36:35.377 回答
0 
/* jQuery */
if( $('.stwpmodpop-cpicker').length ) {

    $('.stwpmodpop-cpicker').wpColorPicker({
        change: function( event, ui ) {
            var theColor = ui.color.toString();
            $(this).parent().parent().parent().siblings('.stwpmodpop-fillcolor').html( theColor );
        }
    });
}

/* HTML */
<p>
    <input type="text" class="form-control stwpmodpop-cpicker" name="colorpicker_example" value="" />
    <span class="stwpmodpop-fillcolor"></span>
</p>
于 2020-05-30T16:39:00.660 回答