使用Vanilla JS选择事件目标的最佳实践

Question

问题：

1. 每当用户点击表格中的列标题时，系统都会移除所有相同.active的类名table tr th span.sorting。
2. 将类名.active添加到当前点击的目标元素的子项。

结构：

<table>
    <tr>
        <th>
            <span class="sorting"></span>
        </th>
        <th>
            <span class="sorting"></span>
        </th>
        <th>
            <span class="sorting active"></span>
        </th>
    </tr>
</table>

解决方案（已完成）：

1. 不知道
2. 向已点击列的子项添加课程：trigger.target.children[0].classList.add('active')

每当我点击active元素并将<span class="sorting">类分配给当前点击的块时，从<th>删除所有active类的最佳方法是什么？

请不要jQuery。

Answer 1

您可以使用querySelectorAll获取元素，使用Array.from将输出转换为数组。

Array.from( document.querySelectorAll( "th .sorting" ) );

现在迭代它们并使用classList API

删除该类

Array.from( document.querySelectorAll( "th .sorting" ) ).forEach( function( ele ){
  ele.classList.remove( "active" );
});

最后到当前元素，您可以将该类添加到事件的currentTarget

event.currentTarget.classList.add( "active" );

<强>演示

var elements = Array.from( document.querySelectorAll( "th .sorting" ));

elements.forEach( function(ele){
   ele.addEventListener( "click", function(){
      elements.forEach( function( ele ){
         ele.classList.remove( "active" );
      });
      ele.classList.add( "active" );
   });
});

.active
{
  background-color: #f00;
}

<table>
  <tr>
    <th>
      <span class="sorting">A</span>
    </th>
    <th>
      <span class="sorting">B</span>
    </th>
    <th>
      <span class="sorting active">C</span>
    </th>
  </tr>
</table>

Answer 2

在点击.sorting元素时移除所有活动的类，然后在currentTarget上添加

let elements = Array.from(document.getElementsByClassName('sorting'));
elements.forEach(e => {
  e.addEventListener('click', s => {
    elements.forEach(el => el.classList.remove('active'));
    s.currentTarget.classList.add('active');
  });
})

<table>
  <tr>
    <th>
      <span class="sorting"></span>
    </th>
    <th>
      <span class="sorting"></span>
    </th>
    <th>
      <span class="sorting active"></span>
    </th>
  </tr>
</table>

Answer 3

var allTh = document.querySelectorAll("#tbl thead tr th");
for(var i = 0; i < allTh.length; i++){
  allTh[i].addEventListener("click",function(e){
      removeAllActiveClasses();
      e.target.classList.add("active");
  });
}

function removeAllActiveClasses(){
  var allActiveClassElement = document.querySelectorAll(".active");
  for(var i = 0; i < allActiveClassElement.length; i++){
    allActiveClassElement[i].classList.remove("active");
  }
}

.active{
  color : blue;
}

<table id="tbl">
    <thead>
      <tr>
          <th>
              <span class="sorting">Col 1</span>
              
          </th>
          <th>
              <span class="sorting">Col 2</span>
              
          </th>
          <th>
              <span class="sorting active">Col 3</span>
          </th>
      </tr>
    </thead>
</table>

Answer 4

document.querySelectorAll(".active.sorting").forEach(e=>e.classList.remove("active"))
event.currentTarget.classList.add(".active")

我们对querySelector返回的值有forEach函数，所以我们可以遍历那个domArray，然后第二个代码行放在事件监听器的上下文中

Answer 5

直接在HTMLCollection上工作也应该是一种可行的方法：

var elements = document.getElementsByClassName('sorting');
for(i=0;i<elements.length;i++) {
    elements[i].className -= ' active';
}

Answer 6

您可以尝试以下代码

＆＃13;

＆＃13;

var elems = Array.from(document.getElementsByClassName("sorting"));
//console.log(elems)
elems.forEach(e => e.addEventListener('click', function(event) {
  elems.forEach(e => e.classList.remove("active"))
  event.currentTarget.classList.add("active");
}));

＆＃13;

body {
  font: 13px verdana
}

span.active {
  color: red;
}

span {
  display: block;
  margin: 0 10px;
  cursor: pointer
}

＆＃13;

<table>
  <tr>
    <th>
      <span class="sorting">One</span>
    </th>
    <th>
      <span class="sorting">Two</span>
    </th>
    <th>
      <span class="sorting active">Three</span>
    </th>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;