Как динамически выбрать цвет из палитры цветов с помощью jquery? - PullRequest
Новая
       19

Как динамически выбрать цвет из палитры цветов с помощью jquery?

1 голос
/ 16 апреля 2020

У меня есть форма, которая должна отправлять некоторые данные в базу данных, и данные - это название продукта, а важная часть - это подробности spe c, когда пользователь вводит имя spe c и выбирает его цвет, я не столкнулся с проблемой при создании ввода spe c, но столкнулся с проблемой в части выбора цвета, он должен сделать следующее: когда я нажимаю кнопку цвета, он показывает палитру выбора цвета и когда я выберите цвет, который он будет делать 2 вещи: во-первых, измените цвет значка в этой нажатой кнопке, а во-вторых, чтобы значение в выбранном цвете было скрыто типа, я пытаюсь динамически генерировать палитру цветов, но она немного глючит. примечание: - я использую палитру цветов

, а код указан ниже https://codepen.io/amr4web/pen/ZEbWWWG

$(function () {
  if ($(".addColor").length) {
    // start add color
    $(document).on("click", ".addColor", function (e) {
      e.preventDefault();
      var thisBtn = $(this);
      thisBtn.siblings(".colorPickerContainer").toggleClass("active my-3");
      AColorPicker.from(".picker").on("change", function (picker, color) {
        thisBtn.children(".icon").css("color", color);
        thisBtn.children("input").val(color);
      });
    }); //end add color
  } // end color picker
  
   $(document).on("click", ".addProduct",function(e){
     var productContent =' <div class="singleSpec"> <label>spec name <input type="text" name="color" value=""> </label> <div class="col-lg-6 col-12"> <button class="addColor"><span class="icon"><i class="fas fa-palette"></i></span> add color <input type="hidden" name="color" value=""> </button> <div class="colorPickerContainer"> <div class="picker" acp-color="#ffffff" acp-show-rgb="yes" acp-show-hsl="yes" acp-show-hex="yes"> </div></div></div></div>';
     $(".productsContainer").append(productContent);
   });
});
body {
  background-color: #efe9e7;
}
body .colorPickerContainer {
  height: 0;
  position: absolute;
  overflow: hidden;
  display: block;
  left: 0;
  top: 100%;
  background-color: #eeeeee;
  transition: 0.8s;
}
body .colorPickerContainer.active {
  height: auto;
  top: auto;
  z-index: 9999;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(3, 1, 1, 0.08);
}
body .colorPickerContainer.active .picker {
  z-index: 99999;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/a-color-picker@1.1.8/dist/acolorpicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<form action="#" class="productsContainer">
     <label>Product name
      <input type="text" name="color" value=""> </label>
  <div class="singleSpec">
    <label>spec name
      <input type="text" name="color" value=""> </label>
    <div class="col-lg-6 col-12">
      <button class="addColor">
        <span class="icon"><i class="fas fa-palette"></i></span>
        add color
        <input type="hidden" name="color" value="">
      </button>
      <div class="colorPickerContainer">
        <div class="picker" acp-color="#ffffff" acp-show-rgb="yes" acp-show-hsl="yes" acp-show-hex="yes">

        </div>
      </div>
    </div>
  </div>
</form>
<button class="addProduct">
  add new product
</button>
...