用jquery和spectrum.js动态改变文本颜色 [英] Dynamically change text color with jquery and spectrum.js

问题描述

我有一个< span> 标记，< span class =output renderid =text1>< span> ，我希望由spectrum.js动态控制以改变颜色。

span从这个jquery中呈现出来：

  $（提交（
函数（事件）{
 $（＃text1）。html（$（＃1）。val（））; 
} 
）; 
  

为了让颜色选择器影响跨度，我试过了：

  $（。output render）。spectrum（{
 color：＃f00
}）; 
  

上面只创建一个HTML文本输入框，其中颜色选择器曾经是颜色选择器出现在下面）。但它对< span> 没有影响。我可以用jQuery来做到这一点吗？

我使用下面的代码使颜色选择器出现：

（
color：＃f00
}）;

使得颜色选择器出现在这个HTML标签<输入类型='input'id =picker1/>

解决方案

http://bgrins.github.io/spectrum/ =noreferrer> documentation ，您需要使用事件明确更改颜色。

例如：

  function updateColor（element，color）{
 var hexColor =transparent; 
 if（color）hexColor = color.toHexString（）; 
 $（element）.css（color，hexColor）; 
 
 
 $（＃picker1）。spectrum（{
 color：＃f00，
 hide：function（color）{
 updateColor（。output.render，color）; 
} 
}）; 
  

另外请注意，要选择一个同时具有输出和 render 类，您需要使用选择器 .output.render 。

这里有一个工作小提琴 http://jsfiddle.net/bortao/mjHUD/

I have a <span> tag, <span class="output render" id="text1"></span>, that I would like to be dynamically controlled by spectrum.js to change the color.

The span is rendered from this jquery:

$("#text_submit").submit(
    function(event) {
        $("#text1").html($("#1").val());
    }
);

To get the color picker to affect the span I tried:

$(".output render").spectrum({
    color: "#f00"
});

The above creates only an HTML text input box where the color picker used to be (how I got the color picker to appear is below). But it has no effect on the <span>. What can I do with jQuery to make this happen?

I used the code below to make the color picker appear:

$("#picker1").spectrum({
    color: "#f00"
});

which made the color picker appear where this HTML tag is <input type='input' id="picker1" />

解决方案

According to documentation, you need to explicitly change the color using events.

For example:

function updateColor(element, color) {
    var hexColor = "transparent";
    if (color) hexColor = color.toHexString();
    $(element).css("color", hexColor);
}

$("#picker1").spectrum({
    color: "#f00",
    hide: function (color) {
        updateColor(".output.render", color);
    }
});

Also note that to select an element with both output and render classes, you need to use the selector .output.render.

Here's an working fiddle http://jsfiddle.net/bortao/mjHUD/

这篇关于用jquery和spectrum.js动态改变文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！