Question

我正在使用频谱（https://github.com/bgrins/spectrum），一个用于彩色托盘的jQuery插件。我的目标是将颜色直接应用于背景，同时用户正在浏览不同的颜色。

到目前为止我所拥有的是：

//*****Part of a 3rd party file, which I cannot modify****
$("#picker1").spectrum({
    allowEmpty:true,
    color: "#ECC",
    showInput: true,
    preferredFormat: "hex",
}); 
//***********************************


$("#picker1").on("change keyup paste", function(){
    newcolor=$("#picker1").val();
    $(".menu-itempreview").css("background-color", newcolor);     
});



<ul id="menu-primary-menupreview" class="someclass">
    <li class="menu-itempreview">Home</li>
    <li class="menu-itempreview">Sample Page</li>
    <li class="menu-itempreview">Uncategorized</li>
</ul>


<input type='input' id="picker1" />

在这里嘲笑我：http://jsfiddle.net/h4Lc5b6a/

问题是，只有当用户点击提交按钮时颜色才会更新。我怎样才能做到这一点，以便在用户浏览不同颜色的同时动态更新背景？

似乎问题在于onchange，当javascript修改输入字段时，它不会触发。

Answer 1

您可以使用move回调（http://bgrins.github.io/spectrum/#events-move）添加到频谱初始化：

$("#picker1").spectrum({
    //...,
    move: function(color) {
        $(".menu-itempreview").css("background-color",  color.toHexString());
    }
});

此外，您可以在频谱初始化后使用this：

// Alternatively, they can be added as an event listener:
$("#picker").on('move.spectrum', function(e, tinycolor) { });
$("#picker").on('show.spectrum', function(e, tinycolor) { });
$("#picker").on('hide.spectrum', function(e, tinycolor) { });
$("#picker").on('beforeShow.spectrum', function(e, tinycolor) { });

通过javascript修改时，onchange不会触发

1 个答案: