Question

Stackoverflow太棒了！我刚刚发布了一个问题，社区在几分钟内就回答了问题，并获得了工作答案！

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

所以我决定创建一个预定义颜色的简单4x4托盘。托盘是使用不同背景颜色的div在名为“supercolor”的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＆amp;的帮助下@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

将事件传递给事件处理程序，例如.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("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='"+color+"' value='"+color+"' />"); // create html
     }
    }
  });

Answer 2

我已经创建了一个解决方案，可以提供我认为您所追求的内容。有关代码，请参阅https://gist.github.com/962872。

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

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

只需添加到点击处理程序，即可完成点击操作。

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

2 个答案: