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

Question

I have an HTML like this.: And when I click on tag <a> I need to get closest parent node with selector ".container" The script is below, but it works only for the first one column (with the first one specify selector) How to bring the code works properly like with this parameter or something else?

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

Here is the script

<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

You should add event handlers with .addEventListener() , and the handlers should be functions, not strings:

(() => {
  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");
    });
  }
})();

You could also do it with a delegation setup, such that you handle "clicks" at the document level and dispatch to the color changer when the event target matches ".container a" (or whatever works).

Answer 2

You are over complicating it by passing in colors to the event handler. You are using a data attribute so just read it when you click on the element.

 (() => { 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> 

Now you can even avoid the loop over the anchors and use event delegation

 (() => { 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>