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

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和单个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

var selected_arry=[]；
$（'#111111'）。单击（函数（）{
如果（所选数组==1）{
所选路径[0]=0；
$（'#111111'）.html（“”）；
}否则{
选择的_arry=1；
$（'#111111'）.html（✓；'）；
}
});
->对接下来的15个div重复相同的代码，但ID不同

我的问题是，我必须对我创建的所有部门重复这一点，它看起来确实非常未优化，我认为必须有更好的方法来做到这一点。我只有几个月的Jquery经验和一个新手开发人员。我希望所有的大师都能给我指出一个更有效的方法

多谢各位

编辑：工作代码

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

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>

.颜色{
宽度：40px；
高度：40px；
浮动：左；
光标：指针；
线高：40px；
文本对齐：居中；
}
.red{背景色：#FF2622；}
.green{背景色：#2B6DB9；}
.blue{背景色：#4AFF41；}

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('');
       };
   });
});

$（文档）.ready（函数（）{
$（'.color'）。单击（函数（事件）{
var$this=$（this）；
$this.toggleClass（'selected'）；
if（$this.hasClass（'selected'））{
var color=$this.css（'backgroundColor'）；
$this.html（“✓；”）；
}否则{
$this.html（“”）；
};
});
});

将事件传递给事件处理程序，如下所示

。单击（函数（事件）{…}）。
然后，内部事件函数获得如下颜色属性
var color\u 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("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='"+color+"' value='"+color+"' />"); // create html
     }
    }
  });

$（'.supercolor'）。单击（函数（事件）{//bind event to parent
var$target=$（event.target）；
if（$target.hasClass（'colordiv'）{//检查是否单击了colordiv
如果（$target.html（）
$target.html（“”）；//清除html（“取消单击”）
}
否则{//div以前没有被单击过
var color=$（event.target）.css（'background-color'）；//获取颜色
$（event.target）.html（✓；）//创建html
}
}
});
将事件传递给事件处理程序，如下所示
。单击（函数（事件）{…}）；
。
然后，内部事件函数获得如下颜色属性
var color\u 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("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='"+color+"' value='"+color+"' />"); // create html
     }
    }
  });

$（'.supercolor'）。单击（函数（事件）{//bind event to parent
var$target=$（event.target）；
if（$target.hasClass（'colordiv'）{//检查是否单击了colordiv
如果（$target.html（）
$target.html（“”）；//清除html（“取消单击”）
}
否则{//div以前没有被单击过
var color=$（event.target）.css（'background-color'）；//获取颜色
$（event.target）.html（✓；）//创建html
}
}
});
我已经创建了一个解决方案，可以提供我认为您需要的东西。有关代码，请参阅

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

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

只需添加到单击处理程序，您就可以在单击时执行更多操作。
我创建了一个解决方案，它提供了我认为您需要的内容。有关代码，请参阅

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

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

只需添加到单击处理程序，您就可以在单击上完成更多操作。
Hmm，对不起，我不明白。这里是新手开发人员。您可以根据场景编写一些示例吗？@egis我认为您可以在单击函数中执行
$（此）
。而不是
$（event.target）
好吧，如果您将事件处理程序绑定到父级，那么
此
将引用该父级，而不是已单击的子级；）@egi感谢您解决了问题的一部分。但是当用户再次单击取消检查时，代码需要知道是否已单击它