在元素上单击时将CSS类添加到元素，出现一些错误？

debugcn 发表于 Dev

AskRahul

鉴于此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">Fail</label>
   </li>
 </ul>

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">Fail</label>
   </li>
 </ul>

我正在创建一个JavaScript函数，当用户单击该函数时，它将根据该元素的data-pos属性完美地工作，从而向该元素添加新类。

我尝试了以下JavaScript。它可能会添加完美的课程<li class="List Noah1">，<li class="List Liam1">或者<li class="List James1">

第一个问题是它也在输入上添加了不必要的'null1'类。例：<input class="text null1">

第二个问题就此而言，javascript仅在第一行上工作。在第一行之后，它可能无法在同一页面的第二，第三，第四...上运行。我们将此代码添加到codepen https://codepen.io/MrUmang/pen/WNoQvvq

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

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

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)
    }
   document.querySelector('ul').addEventListener('click', clickEvent, false);

body {
    color: #333;
    background-color: #eaeaea;
    padding: 13px 24px;
}

.List.Noah1:after {
  content:'\2713';
  display:inline-block;
  color:#09a526;
  vertical-align: top;
  padding:0 6px 0 0;
}
.List.Liam1:after {
  content:'\2717';
  display:inline-block;
  color:red;
  vertical-align: top;
  padding:0 6px 0 0;
}
.List.James1:after {
  content:'\2717';
  display:inline-block;
  color:red;
  vertical-align: top;
  padding:0 6px 0 0;
}
hr {
    height: 0px;
    border: 2px solid;
    width: 47%;
    text-align: -webkit-auto;
    display: inline-block;
}
.text {
    border: 0;
    width: 0;
    padding: 0;
}

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

如何解决这个问题呢？

兰迪·卡斯本

问题是您只在第一个设置处理程序ul。

解决方案是包装整个HTML结构。也许与div。然后像下面这样在wrapper元素上设置处理程序：

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

这是一个完整的工作解决方案：

function clickEvent(event) {
  let element = event.target
  if (element.tagName === 'LABEL') {
    element = event.target.parentElement;
  }
  element.classList.add(element.dataset.pos + "1")
}
document.querySelector('div').addEventListener('click', clickEvent, false);

body {
  color: #333;
  background-color: #eaeaea;
  padding: 13px 24px;
}

.List.Noah1:after {
  content: '\2713';
  display: inline-block;
  color: #09a526;
  vertical-align: top;
  padding: 0 6px 0 0;
}

.List.Liam1:after {
  content: '\2717';
  display: inline-block;
  color: red;
  vertical-align: top;
  padding: 0 6px 0 0;
}

.List.James1:after {
  content: '\2717';
  display: inline-block;
  color: red;
  vertical-align: top;
  padding: 0 6px 0 0;
}

hr {
  height: 0px;
  border: 2px solid;
  width: 47%;
  text-align: -webkit-auto;
  display: inline-block;
}

.text {
  border: 0;
  width: 0;
  padding: 0;
}

<div>
  <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>
  <hr>
  <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>
  <hr>
  <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>
  <hr>
  <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>
  <hr>
  <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>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。