使用jquery和spectrum.js动态更改文本颜色

Question

我有一个<span>标记，<span class="output render" id="text1"></span>，它希望由spectrum.js动态控制以更改颜色。

这个span是从这个jquery呈现出来的：

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

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

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

上面只创建了一个HTML文本输入框，颜色选择器以前在这里(下面是我如何让颜色选择器出现的)。但它对<span>没有影响。我能用jQuery做什么来实现这一点呢？

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

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

使得颜色选择器出现在此<input type='input' id="picker1" />标记的位置。

Answer 1

根据文档，您需要使用事件显式地更改颜色。

例如：

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);
    }
});

还请注意，要选择具有output和render类的元素，需要使用选择器.output.render。

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

Answer 2

最简单的方法是：

$("#picker1").spectrum("set", "red");