如何在 jpicker 中使用多个回调

Posted

技术标签:

【中文标题】如何在 jpicker 中使用多个回调【英文标题】:how to use multiple callbacks in jpicker 【发布时间】:2012-11-30 16:43:18 【问题描述】:

我想用jpicker修改多个元素,这是单个元素的代码(#body02),是否可以为每个元素创建一个数组?

   $(document).ready(
function()

  var LiveCallbackElement = $('#body02'),
      LiveCallbackButton = $('#LiveButton');  // you don't want it searching this

                                     // on every live callback!!!
  $('#Callbacks').jPicker(
    window:position:x:'screenCenter',y:'200',
    function(color, context)
    
      var all = color.val('all');
      alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none') +
        ' - alpha: ' + (all && all.a + '%' || 'none'));
      $('#body02').css(
        
          backgroundColor: all && '#' + all.hex || 'transparent'
        ); // prevent IE from throwing exception if hex is empty
    ,
    function(color, context)
    
      if (context == LiveCallbackButton.get(0)) alert('Color set from button');
      var hex = color.val('hex');
      LiveCallbackElement.css(
        
          backgroundColor: hex && '#' + hex || 'transparent'
        ); // prevent IE from throwing exception if hex is empty
    ,
    function(color, context)
    
      alert('"Cancel" Button Clicked');
    );      
  $('#LiveButton').click(
    function()
    
      $.jPicker.List[0].color.active.val('hex', 'e2ddcf', this);
    );

);

谢谢

【问题讨论】:

不清楚你想做什么,(a)单个选择改变几个元素的 bg-color 或(b)几个元素中的每一个都可以单独选择颜色? 【参考方案1】:

有点晚了,但可能对其他人有帮助。如果您想为多个元素设置具有相同值的相同属性,只需添加类 id(逗号分隔)。

    $('#Id1, .class1, .class2, #AnotherId').css(
    
      backgroundColor: all && '#' + all.hex || 'transparent'
    );

但如果您想设置单独的属性或使用单独的值,请进行单独的调用。

    $('#Id1').css(
    
      backgroundColor: all && '#' + all.hex || 'transparent'
    );



    $('.someClass').css(
    
      color: all && '#' + all.hex || 'transparent'
    );

由于 .css 需要一个 css 值数组,您还可以在同一个调用中对同一个元素应用多个更改。

    $('#Id1').css(
    
      //Note the trailing comma except the last entry
      backgroundColor: all && '#' + all.hex || 'transparent',
      color: all && '#' + all.hex || 'transparent'
    ); 

希望对您有所帮助。

【讨论】:

以上是关于如何在 jpicker 中使用多个回调的主要内容,如果未能解决你的问题,请参考以下文章

jPicker 在重置按钮上重置背景颜色以及如何一次打开单个 jPicker 对话框?

如何手动触发 jPicker 对话框?

无法在同一页面上显示多个 jPicker 颜色选择器

如何关闭 jPicker

jpicker默认颜色中的第4和第5列颜色不要在我的输入框中输入值

在 EJS 表中使用 jPicker