jPicker 实时更新字体颜色答案

【问题标题】：jPicker live update of font colorjPicker 实时更新字体颜色
【发布时间】：2012-12-22 15:50:42
【问题描述】：

首先我喜欢jPicker javascript.，它非常适合用作背景。我让它很好地解决了一个小问题（我认为这是我的错，或者是程序中未包含的功能）。我想知道的是 jPicker 可以用来改变字体颜色和背景。我有一个像这样使用 jPicker 的网站：

在标题中

<script type="text/javascript">
  $(document).ready(
    function()
    {
      var LiveCallbackElement = $('#Live'),
          LiveCallbackButton = $('#LiveButton');  // you don't want it searching this on every live callback!!!
      $('#Callbacks').jPicker(
        {},
        function(color, context)
        {
          var all = color.val('all');
          alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none'));
          $('#Commit').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');
        });      
      $('#Callbacks2').jPicker(
        {},
        function(color, context)
        {
          var all = color.val('all');
          alert('Color chosen - hex: ' + (all && '#' + all.hex || 'none'));
          $('#Commit').css(
            {
              fontColor: 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(
            {
              fontColor: hex && '#' + hex || 'transparent'
            }); // prevent IE from throwing exception if hex is empty
        },
        function(color, context)
        {
          alert('"Cancel" Button Clicked');
        });
   });
</script>

然后在体内

<span id=”Live” style=”display: block; height: 72px; margin: 10px; width: 192px;”>
  <h1> Primary Text </h1>
  <h2> Secondary Text </h2>
</span>
<p>
  Please select your Background color:
</p>
<input id=”Callbacks” type=”text” value=”FFFFFF” />
<p>Please select your Text Color:</p>
<input id=”Callbacks2” type=”text” value=”000000” />

如果您尝试代码，背景可以完美运行，但文本颜色不会改变。您会注意到我创建了一个 Callbacks2 函数并将 backgroundColor 更改为 fontColor。希望 CSS 元素 background-color 和 font-color 会改变。我的 Java 编程经验很少，并试图阅读代码，但很快就不知所措。此外，整个页面将有 2 种文本颜色 h1 和 h2 将“实时更新”支持这一点，还是只需要在文本上“提交”，还是我只是试图做一些这个脚本从未打算做的事情？提前感谢您的帮助。

【问题讨论】：

标签： jquery jquery-plugins jpicker

【解决方案1】：

也许我迟到了。但可能对访问用户有所帮助。如您所见，在设置颜色时，它使用 jQuery 的 .css 函数，因此使用与 jQuery 中相同的变量名。所以不是

        $('#Commit').css(
        {
          fontColor: all && '#' + all.hex || 'transparent'
        }); // prevent IE from throwing exception if hex is empty

使用

        $('#Commit').css(
        {
          color: all && '#' + all.hex || 'transparent'
        }); // prevent IE from throwing exception if hex is empty

希望对您有所帮助。是的，jPicker 是一个很好且维护良好的库。

【讨论】：