使用jquery 动态颜色选择器？

Question

我有一个表格，它必须在数据库中发送一些数据，数据是产品的名称，重要的部分是规格详细信息，用户将输入规格名称并选择其颜色，我没有t 在生成规范输入时遇到问题，但在颜色选择器部分遇到问题，它必须执行以下操作：当我单击颜色按钮时，它将显示颜色选择器托盘，当我选择颜色时，它会做两件事第一个是更改 this 单击按钮中的图标颜色，第二个是更改隐藏输入类型中所选颜色的值，我正在尝试动态更改生成颜色选择器，但它有点错误。注意：- 我正在使用这个颜色选择器

代码在下面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>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<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>

Answer 1

每次单击 addColor 按钮时，您都会创建 AColorPicker。还需要添加id属性来区分pickers。

这应该可行：

$(function () {
        if ($(".addColor").length) {
            // start add color
            $(document).on("click", ".addColor", function (e) {
                e.preventDefault();
                $(this).siblings(".colorPickerContainer").toggleClass("active my-3");
            }); //end add color
            AColorPicker.from(".picker").on("change", function (picker, color) {
                var thisBtn = $(picker.element).parents('.colorPickerContainer').siblings('.addColor');
                thisBtn.children(".icon").css("color", color);
                thisBtn.children("input").val(color);
            });

        } // end color picker

        var pickerId = 0;
        $(document).on("click", ".addProduct", function (e) {
            pickerId++;
            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" id="picker_' + pickerId + '" acp-color="#ffffff" acp-show-rgb="yes" acp-show-hsl="yes" acp-show-hex="yes"> </div></div></div></div>';
            $(".productsContainer").append(productContent);
            AColorPicker.from("#picker_" + pickerId).on("change", function (picker, color) {
                var thisBtn = $(picker.element).parents('.colorPickerContainer').siblings('.addColor');
                thisBtn.children(".icon").css("color", color);
                thisBtn.children("input").val(color);
            });
        });
    });