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

您应该使用CountVectorizer添加事件处理程序，并且处理程序应该是函数，而不是字符串：

.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"); }); } })();匹配（或可行）时，您可以在文档级别处理“点击”并分派给换色器。

Answer 2

通过将颜色传递给事件处理程序，您使它过于复杂。您正在使用数据属性，因此单击元素时只需读取它即可。

router.post("/signup", async (req, res) => {
    try{
        const userRegister = await UserRegister.create({
            _id: new mongoose.Types.ObjectId(),
            nickname: req.body.nickname,
            email: req.body.password,
            password: req.body.password,
            level: 0
        });
    }
    catch(err){
        console.log("error => " + err)
        res.status(409).json({
        message: "ERROR"
        })
    }

    console.log(userRegister);
    res.status(200).json({
        message: "User created"
    });
});

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

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

2 个答案: