jquery - 用于更改背景颜色的 Javascript 颜色选择器

Question

我一直在尝试重新创建可在此处找到的颜色选择器函数:

http://www.chismbrothers.com/site/colorit

我认为我拥有 JSFiddle 中的大部分功能，但我缺少一些或一些东西。

$('.color').hover(function(){
    $('#image').css({
        'background-color':$(this).css('background-color')
    });
})

#image {
    background: url(http://www.chismbrothers.com/images/woodfloors.png);
    height: 341px;
    width: 515px;
}

.color {
    width: 50px;
    height: 50px;
    display: block;
    float: left;
    margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id='image'></div>
<span class='color' style='background-color: #fe4'></span>
<span class='color' style='background-color: #e14'></span>
<span class='color' style='background-color: #410'></span>

http://jsfiddle.net/NinjaSk8ter/ryLDn/

由于这依赖于更改 2 个图像的颜色，我什至不确定如何将它们上传到 JSFiddle。

有人能指出我正确的方向吗？我错过了什么？我错过了多少？

Answer 1

如果您查看第一个链接显示的图像:

它是使用透明背景制作的。当您将鼠标悬停在不同的颜色上时，它会更改背景颜色的 css。

这是一个使用 jquery 的工作示例:http://jsfiddle.net/maniator/H6Bg6/ ( fiddle 不起作用，因为颜色选择器库似乎不再存在)

这也可以像这样直接用 javascript 完成:

const colorChosen = document.getElementById('colorChosen');
const image = document.getElementById('image');

document.querySelector('.color').addEventListener('change', ({
  currentTarget
}) => {
  image.style.backgroundColor = currentTarget.value;
  colorChosen.textContent = currentTarget.value;
});

#image {
  background: url(/image/5O4iO.png);
  height: 341px;
  width: 515px;
}

.color {
  width: 50px;
  height: 50px;
  float: left;
  margin: 5px 0px;
}

<div id='image' style='background-color: #fdee44'></div>
<input value="#fdee44" class="color" type="color" />
<span id="colorChosen">#fdee44</span>