我有以下代碼在單擊按鈕時顯示 ColorPicker
問題
<div class="main_container">
<button type="button" class="change_color">change color</button>
<div style="display:none;" class="change_container">
<div class="BackgroundPopup_colorView__U3of1">
<div class="picker_launcher" style="background: rgb(255, 255, 255); width: 24px; height: 24px; border: 1px solid rgb(208, 213, 221); box-shadow: rgba(16, 24, 40, 0.1) 0px 4px 8px -2px, rgba(16, 24, 40, 0.06) 0px 2px 4px -2px; border-radius: 4px;"></div>
</div>
</div>
</div>
$('.change_color').on("click", function () {
$(this).closest(".main_container").children(".change_container").show();
var picker_btn=$(this).closest(".main_container").children(".picker_launcher");
let picker = new ColorPicker(picker_btn, "#4c0082");
});
uj5u.com熱心網友回復：
@r-tek/colr_pickr
https://www.npmjs.com/package/@r-tek/colr_pickr
Colr Pickr 是一個原生的 JavaScript 顏色拾取組件
提供的（在評論中）codepen 也沒有使用jQuery.
color_pickr 組件僅是 vanilla-javascript，因此無法理解/識別 jquery 物件/集合。
此代碼（children() 固定為 find()）
var picker_btn=$(this).closest(".main_container").find(".picker_launcher");
let picker = new ColorPicker(picker_btn, "#4c0082");
將一個 jquery 物件傳遞給 ColorPicker，它以錯誤回應
t.setAttribute is not a function
（t因為代碼是min'd）
相反，您的代碼需要傳遞一個 DOM 物件。只要您確定picker_btn選擇了一個元素，您就可以使用：
var picker_btn=$(this).closest(".main_container").find(".picker_launcher");
let picker = new ColorPicker(picker_btn[0], "#4c0082");
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/518082.html