Question

我正在尝试使用这个简单的颜色选择器更改元素的背景颜色，但是我没有得到任何结果，也没有控制台错误。

<div class="col-md-3">
    <div class="home-icon">
        <div class="home-icon-text">
            <h3>Home</h3>
        </div>
    </div>
    <div class="icon-color text-center">
        <input class="color {onImmediateChange:'updateInfo(this);'}">
    </div>
</div>

function updateInfo(color) {
    var a = color.rgb[0];
    var b = color.rgb[1];
    var c = color.rgb[2];

    $(this).parent().prev().css("background", "rgb(" + a + "," + b + "," + c + ")");
};

Answer 1

我认为可能存在两个问题：

this在调用函数时引用函数内部的全局窗口对象。你可以通过给div一个id，然后选择它并应用背景来做你想要的。
"rbg("+a+","+b+","+c+")"似乎不起作用。我想你可以将数字乘以255，然后用Math.Floor将它们四舍五入。

尝试以下方法：

<script type="text/javascript" src="jscolor/jscolor.js"></script>
<script type="text/javascript">
function updateInfo(color) {
    var a = Math.floor(color.rgb[0] * 255);
    var b = Math.floor(color.rgb[1] * 255);
    var c = Math.floor(color.rgb[2] * 255);
    var color = "rgb(" + a + "," + b + "," + c + ")";
    var node = document.getElementById("colorme");
    node.style.backgroundColor = color;
}
</script>

<div class="col-md-3" id="colorme">
    <div class="home-icon">
        <div class="home-icon-text">
            <h3>Home</h3>
        </div>
    </div>
    <div class="icon-color text-center">
        <input class="color {onImmediateChange:'updateInfo(this);'}" >
    </div>
</div>

希望有所帮助！

jsColor.js更改元素

1 个答案: