Jquery - помогите создать самую простую палитру цветов

Question

Stackoverflow потрясающий!Я только что опубликовал вопрос, на который сообщество ответило в течение нескольких минут, и был получен рабочий ответ!

У меня есть еще один вопрос по поводу пользовательского палитры цветов.Я знаю, что существует множество палитр цветов, но их слишком сложно использовать.Мне нужен более простой.

Поэтому я решил создать простую паллету 4x4 предварительно определенного цвета.Поддоны формируются с использованием div с другим цветом фона в div-классе с именем 'supercolor'.

<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>

В моем разделе сценариев я вручную добавляю функцию щелчка для каждого и отдельного идентификатора для динамического создания (флажок опции ввода отмечен 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("&#10003;<input type='checkbox' name='selected_color[]' hidden checked id='"+color+"' value='"+color+"' />"); // create html
     }
    }
  });