javascript - 在没有 Jquery 的情况下单击将类添加到子元素

Question

我有一项 Jquery 无法正常工作的任务，因此我需要一种变通方法来在单击事件时向 div 的子元素执行添加类事件。 我该怎么做。 用于该目的的 Jquery 将是

$('.wpb_vc_column').click(function(e) {
  alert();
  e.preventDefault();
  $(this).find('.vc_controls').addClass('show-controls');
});

.show-controls {
  color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing</div>
</div>

它基本上是一个需要在移动设备上运行的 wordpress 后端。

问候

Answer 1

您可以使用querySelectorAll() 来选择类为wpb_vc_column 的所有元素并将点击事件关联到每个元素。然后点击这些元素会找到class为vc_controls的子元素并添加class。

function clickedColumn(e){
    e.preventDefault();
    if(this.querySelector('.vc_controls')){
      this.classList.add('show-controls');
    }
}
document.querySelectorAll('.wpb_vc_column').forEach(function(el){
  el.addEventListener('click', clickedColumn);
});

.show-controls{
  color:red;
}

<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing 1</div>
  <div class="vc_controls">SomeThing 2</div>
</div>