Jquery - 帮助创建有史以来最简单的颜色选择器

Question

Stackoverflow 太棒了！我刚刚发布了一个问题，社区在几分钟内就给出了答案，并获得了有效的答案！

我还有一个关于自定义颜色选择器的问题。我知道有很多颜色选择器，但使用起来太复杂了。我需要一个更简单的。

所以我决定创建一个简单的 4x4 预定义颜色调色板。这些托盘是使用名为“supercolor”的 div 类下具有不同背景颜色的 div 形成的。

<div class="supercolor" >                       
  <div class="colordiv" id="#111111" style="background-color:#111111;">&nbsp;</div>
  <div class="colordiv" id="#222222" style="background-color:#222222;" >&nbsp;</div>                
  <div class="colordiv" id="#333333" style="background-color:#333333;">&nbsp;</div>
</div>

在我的脚本部分，我手动向每个单独的 id 添加单击功能，以动态创建一个（输入选项复选框选中的 html）和一个刻度字符，以便用户知道颜色已被选择。如果已经选中了除法，则会删除（输入选项复选框选中的html）和勾号字符。

我使用一个数组来确定 div 是否被检查，如果是，则更新该数组索引。创建输入复选框，因此当页面提交时，我有一种方法可以根据复选框值（十六进制背景颜色）知道选择了哪种颜色。

var selected_arry = [];

$('#111111').click(function(){
  if (selected_arry == 1){
    selected_arry[0] = 0;
    $('#111111').html("");
  } else {
    selected_arry = 1;
    $('#111111').html("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='#111111' />");
  }
});

->repeat same code for next 15 divs but with different ID

我的问题是，我必须对我创建的所有部门重复此操作，它看起来确实非常未优化，我认为必须有更好的方法来做到这一点。我只接触了几个月的 Jquery，并且是一个新手开发人员。希望各位高手能够指点我一个更有效的方法。

非常感谢！

编辑：工作代码

最后在@egis & 的帮助下@Rob Cowie，代码是通过非常高效且可扩展的功能完成的。注意：我删除了一些部分（使像我这样的初学者更容易理解）并编辑了一些部分以允许多重选择。

CSS 代码：

<style type="text/css">
   .colour {
   width: 40px;
   height: 40px;
   float: left;
   cursor: pointer;
   line-height: 40px;
   text-align: center;
   }
   .red {background-color: #FF2622;}
   .green {background-color: #2B6DB9;}
   .blue {background-color: #4AFF41;}
</style>

HTML 代码：

<div id="colour-picker">
   <div class="colour red">&nbsp;</div>
   <div class="colour green">&nbsp;</div>
   <div class="colour blue">&nbsp;</div>
</div>

脚本代码：

$(document).ready(function() {
   $('.colour').click(function(event){
      var $this = $(this);
   $this.toggleClass('selected');
       if ($this.hasClass('selected')){
          var colour = $this.css('backgroundColor');
      $this.html("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='"+colour+"' value='"+colour+"' />");
       } else {
          $this.html('');
       };
   });
});

Answer 1

我创建了一个解决方案，可以满足您的需求。请参阅 https://gist.github.com/962872 获取代码。

总之，单击颜色 div 会切换“选定”类并设置隐藏表单输入的值（将提交颜色）。

如果当前选择了单击的 div，则删除该类，并将隐藏输入的值设置为空。

您只需添加到单击处理程序即可对单击执行更多操作。

Answer 2

将事件传递给事件处理程序，例如 .click(function(event){ ... });。
然后在事件函数内部获取颜色属性，如下所示 var color_hex = $(event.target).css('bacground-color');。该代码未经测试，语法可能错误，我现在无法测试它，但我想我向您展示了正确的路径；）

一些示例：

  $('.supercolor').click(function(event){ // bind event to parent
   var $target = $(event.target);
   if ($target.hasClass('colordiv'){ // check if color div is clicked
    if ($target.html() !== ''){ // check if it has some html inside, if so - it means the div has been clicked before
     $target.html(''); //clear the html ("unclick")
    }
    else{ // div hasn't been clicked before
     var color = $(event.target).css('background-color'); //get the color
      $(event.target).html("✓<input type='checkbox' name='selected_color[]' hidden checked id='"+color+"' value='"+color+"' />"); // create html
     }
    }
  });