javascript - 使用 jquery 和 spectrum.js 动态改变文本颜色

Question

我有一个 <span>标签，<span class="output render" id="text1"></span> ，我想由 spectrum.js 动态控制来改变颜色。

跨度是从此 jquery 呈现的:

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

让颜色选择器影响跨度我试过:

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

上面的代码只创建了一个 HTML 文本输入框，其中颜色选择器曾经是(我如何让颜色选择器出现在下面)。但是对<span>没有影响.我可以用 jQuery 做些什么来实现这一点？

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

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

这使得颜色选择器出现在这个 HTML 标签是 <input type='input' id="picker1" /> 的地方

Answer 1

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

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

这是一个工作 fiddle http://jsfiddle.net/bortao/mjHUD/