javascript - this.element 的closest() 无法正常工作

Question

我有一个像这样的 HTML:当我单击标签 <a> 时我需要使用选择器 ".container" 获取最近的父节点 该脚本如下，但它仅适用于第一列(第一个指定选择器)如何使代码正常工作，就像 this 一样参数还是其他？

<div class="wrapper">
    <div class="container">
        <div class="sub-container">
            <ul>
                <li><a href="#" data-color="red" class="red"></a></li>
                <li><a href="#" data-color="green" class="green"></a></li>
                <li><a href="#" data-color="blue" class="blue"></a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="sub-container">
            <ul>
                <li><a href="#" data-color="red" class="red"></a></li>
                <li><a href="#" data-color="green" class="green"></a></li>
                <li><a href="#" data-color="blue" class="blue"></a></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="sub-container">
            <ul>
                <li><a href="#" data-color="red" class="red"></a></li>
                <li><a href="#" data-color="green" class="green"></a></li>
                <li><a href="#" data-color="blue" class="blue"></a></li>
            </ul>
        </div>
    </div>
</div>

这是脚本

<script>    

    (() =>{
        const a = document.querySelectorAll('a');

        for(let i=0; i<a.length; i++){
            a[i].setAttribute('onclick', `handleClick('${a[i].getAttribute('data-color')}', '${a[i].nodeName}')`);
    }
        handleClick = (color, selector) => {
        document.querySelector(selector).closest('.container').style.backgroundColor = color;
    }
    })()

</script>

Answer 1

您应该使用 .addEventListener() 添加事件处理程序，并且处理程序应该是函数，而不是字符串:

(() => {
  const a = document.querySelectorAll("a");
  for (let i = 0; i < a.length; ++i) {
    a[i].addEventListener("click", function() {
      this.closest(".container").style.backgroundColor = this.getAttribute("data-color");
    });
  }
})();

您还可以通过委派设置来完成此操作，以便在文档级别处理“点击”，并在事件目标匹配 “.container a” (或其他任何内容)时分派(dispatch)到颜色更改器作品)。