jquery - 用颜色选择器中的颜色填充 div答案

【问题标题】：jquery - Fill div with color from color-pickerjquery - 用颜色选择器中的颜色填充 div
【发布时间】：2014-08-05 08:20:49
【问题描述】：

我正在用 jQuery 和 HTML 制作一个简单的绘画程序。为此，我使用 Spectrum 颜色选择器 (http://bgrins.github.io/spectrum/)。我已经制作了一个由数百个 16x16 正方形（div 类像素）组成的网格，当单击其中一个时，它将被 Spectrum 颜色选择器中的颜色填充，但我不知道该怎么做。这是我的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css.css" />
<title>Pixel Painter</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!-- Jquery -->
<script src='jscolor/jscolor.js'></script> <!--Spectrum js-->
<link rel='stylesheet' href='jscolor/jscolor.css' /> <!--Spectrum css-->
</head>
<body>
<input id='colorpicker' />
<script>
$("#colorpicker").spectrum({ //spectrum config
    color: "#f00",
    showPalette: true,
    showInput: true,
    showAlpha: true,
    chooseText: "Pick",
    cancelText: "X",
    togglePaletteOnly: true,
    showPaletteOnly: true,
    togglePaletteMoreText: "More Colors...",
    togglePaletteLessText: "Less Colors...",
        palette: [
            //color palettes for Spectrum
        ]
});
</script>
<br/>
<table border="1" style="background-color:#FFFFFF; border-collapse:collapse;border:1px solid #000000;color:#000000;width:100%" cellpadding="3" cellspacing="0">
    <tr>
        <!-- Grid -->
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
    </tr>
    <tr>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
        <div class="pixel"></div>
    </tr>
<!--... and a lot more <div class="pixel"></div>-->
</table>
</body>
</html>

http://jsfiddle.net/jGb33/

【问题讨论】：

spectrum 应该将#colorpicker 输入的value 设置为所选颜色。然后，您可以将 click 事件附加到每个 .pixel 并将它们的 background-color 更改为 colorpicker 的值

标签： javascript jquery html paint color-picker

【解决方案1】：

你可以这样做：

var color = "#f00";

$("#colorpicker").spectrum({ //spectrum config
  color: "#f00",
  showPalette: true,
  showInput: true,
  showAlpha: true,
  chooseText: "Pick",
  cancelText: "X",
  togglePaletteOnly: true,
  showPaletteOnly: true,
  togglePaletteMoreText: "More Colors...",
  togglePaletteLessText: "Less Colors...",
  palette: [
        //color palettes for Spectrum
  ],
  change: function(colorSelected) {
    color = colorSelected.toHexString();
  }
});

$('.pixel').click(function(){

  $(this).css('background-color' , color);

});

http://jsfiddle.net/jGb33/1/

【讨论】：

由于某种原因这对我不起作用...？它在你所做的小提琴中工作，但由于某种原因，当我这样做时它什么也没做。
如果它在小提琴中工作，它应该在您的服务器上工作。当你这样做时，什么不起作用？
当我点击方块时，什么也没有发生。我也尝试将其上传到我的服务器。
尝试将您的 javascript 放入 $(document).ready(function(){}) 中