0

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

2 回答 2

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("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='"+color+"' value='"+color+"' />"); // create html
     }
    }
  });
于 2011-05-09T05:28:11.427 回答
2

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

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

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

只需添加到点击处理程序，您就可以在点击上做更多的事情。

于 2011-05-09T17:04:44.107 回答