this.element的最近（）不能正常工作

Question

我有一個這樣的HTML ".container"當我單擊標記<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" （或其他有效方法）匹配時，在文檔級別處理“單擊”並分派給換色器。

Answer 2

通過將顏色傳遞給事件處理程序，您使它過於復雜。 您正在使用數據屬性，因此單擊元素時只需讀取它即可。

 (() => { const handleClick = evt => { // stop the click evt.preventDefault() // get the color const color = evt.target.dataset.color // reference the container element const wrapper = evt.target.closest('.container') // clean up classes wrapper.classList.remove('red', 'green', 'blue') //set class for what was clicked wrapper.classList.add(color) } const anchors = document.querySelectorAll('a'); anchors.forEach(a => a.addEventListener('click', handleClick)) })() 

 a:after { content: attr(data-color) } div.red { background-color: red } div.green { background-color: green } div.blue { background-color: blue } 

 <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> 

現在，您甚至可以避免在錨點上循環，並使用事件委托

 (() => { const handleClick = evt => { // look to see if what we click has the data attribute const color = evt.target.dataset.color // if we do not have the color, than just ignore the click if(!color) return // stop the click evt.preventDefault() // reference the container element const container = evt.target.closest('.container') // clean up classes container.classList.remove('red', 'green', 'blue') //set class for what was clicked container.classList.add(color) } const wrapper = document.querySelector('.wrapper') wrapper.addEventListener('click', handleClick) })() 

 a:after { content: attr(data-color) } div.red { background-color: red } div.green { background-color: green } div.blue { background-color: blue } 

 <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>