javascript - 想要在单击元素时向该元素添加 CSS 类

Question

给定这个 HTML:

 <ul class="myList">
   <li class="List" data-pos="Noah">
      <label><input class="text">pass</label>
   </li>
   <li class="List" data-pos="Liam">
      <label><input class="text">fail</label>
   </li>
   <li class="List" data-pos="James">
      <label><input class="text">average</label>
  </li>
 </ul>

我想创建一个 JavaScript 函数，当用户单击该元素时，该函数将基于 data-pos 添加新类到该元素。元素的属性。

   click on "Noah"  add class Noah1
   click on "Liam"  add class Liam1
   click on "James" add class James1

点击所有元素后的预期结果:

 <ul class="myList">
   <li class="List Noah1" data-pos="Noah">
       <label><input class="text">pass</label>
   </li>
   <li class="List Liam1" data-pos="Liam">
       <label><input class="text">fail</label>
   </li>
   <li class="List James1" data-pos="James">
       <label><input class="text">average</label>
   </li>
 </ul>

我尝试了以下 JavaScript。结果是 <label class="null1">而不是<li class="List Noah1">或<li class="List Liam1">或<li class="List James1">

function clickEvent(event) {
    event.target.classList.add(event.target.getAttribute('data-pos') + "1")
    console.log(event.target.classList)
}

document.querySelector('ul').addEventListener('click', clickEvent, false);

Answer 1

您有嵌套元素。 Click 事件在内部元素 (label) 上触发，然后向上冒泡到 ul 元素。

如果 label 收到点击，您需要步进到父元素。

function clickEvent(event) {
  let element = event.target
  if(element.tagName === 'LABEL') {
    element = event.target.parentElement;
  }
  element.classList.add(element.getAttribute('data-pos') + "1")
  console.log(element.classList)
}