Question

我有以下JS代码

var existingMenus = document.getElementsByClassName('multiSelectMenu');
for (var i = 0; i < existingMenus.length; i++) {
    var existingMenu = existingMenus[i];
    var existingMenuHTML = [];
    var targetChildren = existingMenu.parentElement.nextElementSibling.children;
    console.log(targetChildren)
    // Here I'm adding +1 to the ID as it appears starting at zero with a styled checkbox does not work correctly
    for (var x = 0; x < targetChildren.length; x++) {
        if (targetChildren[x].selected) {
            existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '" checked="true"/><label class="multiLabel" for="' + (x +
                1) + '"><span></span> ' + targetChildren[x].textContent + ' </label></li>';
        } else {
            existingMenuHTML += '<li><input class="dropdown-input" type="checkbox" id="' + (x + 1) + '" data-label="' + targetChildren[x].textContent + '"/><label class="multiLabel" for="' + (x + 1) +
                '"><span></span> ' + targetChildren[x].textContent + ' </label></li>';
        }
    }
    existingMenu.innerHTML += existingMenuHTML;
    console.log(existingMenuHTML)
    var inputs = existingMenu.children;
    console.log(inputs);
    for (var w = 0; w < inputs.length; w++) {
        var input = inputs[w].children[0];
        console.log(input);
        input.addEventListener('click', function() {
            console.log('--------------')
            console.log(event)
            var targetElement = event.target || event.srcElement;
            console.log(targetElement);
            var elementParent = targetElement.parentElement.parentElement.parentElement;
            console.log(elementParent)
            if (!elementParent.classList.contains('open')) {
                elementParent.className += ' open';
            }
            var multiList = elementParent.nextSibling.querySelector('[value="' + targetElement.dataset.label + '"]');
            console.log(multiList)
            // Subtracting one to account for the plus one I added above
            var inputId = targetElement.id - 1;
            if (targetElement.checked == true) {
                multiList.selected = "selcted";
            } else {
                multiList.selected = "";
            }
            console.log('--------------')
        });
    }
}

代码在multiPick的第一个实例上正常工作，但是页面上的所有其他代码都会触发第一个multiSelectMenu项目，即使我点击页面上的第3个multiSelectMenu。

这是控制台的屏幕截图，

以下是代码笔https://jsfiddle.net/6s3rc8d7/当您点击“标签”时，而不是复选框它有我遇到的相同问题。

Answer 1

在您的小提琴中获取不同的 event.target 背后的原因是由于html中的以下代码段。

 <input class="dropdown-input" type="checkbox" id="1" data-label="English only">
 <label class="multiLabel" for="1"><span></span> English only </label>

您可以在label元素中看到 for 属性，其中包含input元素的 id 。 for 属性的功能是，this的值标识标签绑定到哪个表单元素。当您单击标签时，它将模拟有界元素的单击事件。这就是为什么当你点击标签时，在你的脚本中 event.target 是标签与之绑定的输入。

有关 for 属性的更多信息，请参阅此处。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 2

我能够重做代码并将EventListener添加到标签而不是复选框。

EventListener显示错误的目标

2 个答案: