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。

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

Answer 2

最简单的方法如下：

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

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

2 个答案: