多个javascript颜色选择器

Multiple javascript colour pickers

本文关键字：选择器 颜色 javascript 多个      更新时间：2023-09-26

我的网站上有一个颜色选择器。这工作得很好，但是我想有多个多个元素是不同的颜色，例如一个文本粉红色和bg蓝色。

这是我的代码有在那一刻(它的工作，但改变两个盒子)我错过了一个id某处，但我不确定在哪里。

  <div class="row">

  <script type="text/javascript">
  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];
var picker = $('#color-picker');
for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}
$('body').click(function () {
picker.fadeOut(1);
});
$('.call-picker').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
  var codeHex = $(this).data('hex');
  $('.color-holder').css('background-color', codeHex);
  $('#pickcolor').val(codeHex).trigger('change');
});
});
  </script>
      <div class="color-wrapper">
  <p>Choose color for Header</p>
   <!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
  <form name="test">
  <input type="text" name="custom_color" ng-model="Data.headerColor" placeholder="#FFFFFF" id="pickcolor" class="call-picker">
</form>
  <div class="color-holder call-picker"></div>
  <div class="color-picker" id="color-picker" style="display: none"></div>
</div>


  </div>
  <div class="row">

  <script type="text/javascript">
  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];
var picker = $('#color-picker2');
for (var i = 0; i < colorList.length; i++ ) {
picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}
$('body').click(function () {
picker.fadeOut(1);
});
$('.call-picker2').click(function(event) {
event.stopPropagation();
picker.fadeIn(1);
picker.children('li').hover(function() {
  var codeHex = $(this).data('hex');
  $('.color-holder2').css('background-color', codeHex);
  $('#pickcolor2').val(codeHex).trigger('change');
});
});
  </script>
      <div class="color-wrapper">
  <p>Choose color for Header</p>
   <!-- ng-model="eventData.header" This is to post the information in the color picker box into the json at the bottom to make it useable by the server. -->
  <form name="test">
  <input type="text" name="custom_color2" ng-model="Data.bodytextColor" placeholder="#FFFFFF" id="pickcolor2" class="call-picker2">
</form>
  <div class="color-holder2 call-picker2"></div>
  <div class="color-picker2" id="color-picker2" style="display: none"></div>
</div>

picker变量必须更改

<script type="text/javascript">
  var hexText="123";
  var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333',
  '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933',
  '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66'];
var picker2 = $('#color-picker2');
for (var i = 0; i < colorList.length; i++ ) {
picker2.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}
$('body').click(function () {
picker2.fadeOut(1);
});
$('.call-picker2').click(function(event) {
event.stopPropagation();
picker2.fadeIn(1);
picker2.children('li').hover(function() {
  var codeHex = $(this).data('hex');
  $('.color-holder2').css('background-color', codeHex);
  $('#pickcolor2').val(codeHex).trigger('change');
});
});
  </script>
相关文章：