Получить цвет фона в палитре цветов

Question

Мне нужно спроектировать палитру цветов с фиксированными значениями. Поскольку я новичок ie в веб-программировании, я не уверен, что делать дальше. Задача состоит в том, чтобы получить цвет фона при выборе фона палитры, и с этим цветом фон другого элемента div должен измениться.

В этом HTML #palette имеет 30 цветов, от color-1 до color-30 , При выборе цвета из палитры фон .color-container должен измениться. Заранее спасибо.

<div id="palette">
  <div class="row">
    <div class="colors" id="color-1"></div>
    <div class="colors" id="color-2"></div>
    <div class="colors" id="color-3"></div>
    <div class="colors" id="color-4"></div>
    <div class="colors" id="color-5"></div>
    <div class="colors" id="color-6"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-7"></div>
    <div class="colors" id="color-8"></div>
    <div class="colors" id="color-9"></div>
    <div class="colors" id="color-10"></div>
    <div class="colors" id="color-11"></div>
    <div class="colors" id="color-12"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-13"></div>
    <div class="colors" id="color-14"></div>
    <div class="colors" id="color-15"></div>
    <div class="colors" id="color-16"></div>
    <div class="colors" id="color-17"></div>
    <div class="colors" id="color-18"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-19"></div>
    <div class="colors" id="color-20"></div>
    <div class="colors" id="color-21"></div>
    <div class="colors" id="color-22"></div>
    <div class="colors" id="color-23"></div>
    <div class="colors" id="color-24"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-25"></div>
    <div class="colors" id="color-26"></div>
    <div class="colors" id="color-27"></div>
    <div class="colors" id="color-28"></div>
    <div class="colors" id="color-29"></div>
    <div class="colors" id="color-30"></div>
  </div>
</div>
<div class="color-container">
  <h1 style="color: black" id="container-text">Text</h1>
</div>

Answer 1

Вам нужно определить, какой div был нажат, все ваши элементы div имеют один и тот же класс цветов, так что он должен быть вашим селектором, после чего вам нужно извлечь идентификатор div клика. Вы можете сделать это следующим образом:

$('.colors').on('click', function () {
    var colorid = this.id;    
});

После этого вы можете поиграть со значением colorid, я не знаю, как вы собираетесь указать, какой цвет - id color-1, color-2, et c. Так что в качестве примера я использую переключатель, чтобы ваш код был следующим.

$(document).ready(function () {
  $('.colors').on('click', function () {
    var colorid = this.id;
    
      switch(colorid) {
        case "color-1":
           $('.color-container h1').css("color", "red");
        break;
        case "color-2":
          $('.color-container h1').css("color", "blue");
        break;
        case "color-3":
          $('.color-container h1').css("color", "yellow");
        break;
        case "color-4":
          $('.color-container h1').css("color", "orange");
        break;
    }
  });
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div id="palette">
  <div class="row">
    <div class="colors" id="color-1">1</div>
    <div class="colors" id="color-2">2</div>
    <div class="colors" id="color-3">3</div>
    <div class="colors" id="color-4">4</div>
    <div class="colors" id="color-5"></div>
    <div class="colors" id="color-6"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-7"></div>
    <div class="colors" id="color-8"></div>
    <div class="colors" id="color-9"></div>
    <div class="colors" id="color-10"></div>
    <div class="colors" id="color-11"></div>
    <div class="colors" id="color-12"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-13"></div>
    <div class="colors" id="color-14"></div>
    <div class="colors" id="color-15"></div>
    <div class="colors" id="color-16"></div>
    <div class="colors" id="color-17"></div>
    <div class="colors" id="color-18"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-19"></div>
    <div class="colors" id="color-20"></div>
    <div class="colors" id="color-21"></div>
    <div class="colors" id="color-22"></div>
    <div class="colors" id="color-23"></div>
    <div class="colors" id="color-24"></div>
  </div>
  <div class="row">
    <div class="colors" id="color-25"></div>
    <div class="colors" id="color-26"></div>
    <div class="colors" id="color-27"></div>
    <div class="colors" id="color-28"></div>
    <div class="colors" id="color-29"></div>
    <div class="colors" id="color-30"></div>
  </div>
</div>
<div class="color-container">
  <h1 style="color: black" id="container-text">Text</h1>
</div>

Это должно решить вашу проблему.