javascript - 如何将事件处理程序分配给多个元素 (colorPicker)

Question

我正在尝试找到一种方法来为我动态创建的每个框分配事件处理程序。目前，用户可以点击“在上方添加”或“在下方添加”，他们点击的位置会出现 2 行框。

我试图做到这一点，以便当用户点击特定方 block 时，会弹出一个颜色选择器，并且可以更改该特定方 block 的颜色。

但是，我的程序有点问题，它只适用于用户点击的第一个方 block ，并且 colorPicker 再也不会弹出。

有谁知道我该如何解决这个问题，或者是否有更好的选择？

我的代码:

http://codepen.io/anon/pen/bwBRmw

var theParent = document.querySelector(".container");
theParent.addEventListener("click", doSomething, false)

//var picker = new Picker()
function doSomething(e) {
    console.log("gets inside doSomething")
    console.log(e.target)
    console.log(e.currentTarget)
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        console.log("Hello " + clickedItem);
        var k = document.getElementById(clickedItem)
        var picker = new Picker(k)
        picker.show();

    }
     picker.on_done = function(colour) {
        $(k).css('background-color',colour.rgba().toString());
        picker.hide()
        }

    //e.stopPropagation();
}

Answer 1

我在您的 CodePen 中注意到您没有发布 doSomething 的完整代码。您遇到问题是因为 picker 变量是函数的局部变量。如果代码执行不在 IF 语句内，则永远不会创建选择器变量。只需取消注释在函数外部声明 picker 变量的代码，并从实例化新选择器的代码行前面删除 var 指令。此外，您需要重置选择器的“父”元素，因为页面上只有一个选择器:picker.settings.parent = k;

var picker = null; // Initialize global variable

function doSomething(e) {
    console.log("gets inside doSomething")
    console.log(e.target)
    console.log(e.currentTarget)
    if (e.target !== e.currentTarget) {
        var clickedItem = e.target.id;
        console.log("Hello " + clickedItem);
        var k = document.getElementById(clickedItem)

        // Reference the global "picker" variable
        if (!picker) {
          picker = new Picker(k)
        } else {
          // Set the "parent" element of the picker to the newly clicked element
          picker.settings.parent = k;
        }
        picker.show();

    }
     picker.on_done = function(colour) {
        $(k).css('background-color',colour.rgba().toString());
        picker.hide()
        }

    //e.stopPropagation();
}