jsColor.js改变元素的背景颜色

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

我认为，可能有两个问题：

1. 这this指的是功能的内部全局窗口对象时，它被调用。你可以通过给div一个id来做你想要的，然后选择它并应用背景。

2. "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> 

希望帮助！