javascript - 使用 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 的最佳方法是什么？类(class)来自<span class="sorting">每当我点击 <th>元素并分配 active当前单击的 block 的类？

请不要使用 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>