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

var myEle = document.getElementsByClassName('vc_controls');
myEle.className = "show-controls";

Answer 2

您可以使用querySelectorAll()选择类wpb_vc_column的所有元素，并将click事件与每个元素相关联。然后单击这些元素将找到类vc_controls的子元素，并将类添加到其中。

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>

Answer 3

使用querySelector方法并在父元素中搜索子元素

el.querySelector("#child").className = 'show-controls';
or  
el.querySelector('.vc_controls').className = 'show-controls';

Answer 4

＆＃13;

function changeClass(element){
var get_vc_controls=element.getElementsByClassName('vc_controls');
get_vc_controls[0].className='show-controls';
}

＆＃13;

.show-controls {
  color: red
}

＆＃13;

<div class="wpb_vc_column" style="border:1px solid;" onclick="changeClass(this)">
  <div class="vc_controls">SomeThing</div>
</div>

＆＃13;

单击“添加类到子元素”而不使用Jquery

4 个答案: