javascript - On click add class to child element without Jquery - Stack Overflow

admin管理员组

文章数量:1357592

I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event. How do I go about that. The Jquery for that purpose would be

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

.show-controls {
  color: red
}

<script src=".1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing</div>
</div>

I have a task where Jquery is not working, so I need a workaround to perform an add class event to child element of a div upon click event. How do I go about that. The Jquery for that purpose would be

$('.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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wpb_vc_column">
  <div class="vc_controls">SomeThing</div>
</div>

Its basically a wordpress backend thing which need to be workable on mobile devices.

Regards

• javascript
• jquery

Share Improve this question Follow edited May 16, 2018 at 6:15 guradio 15.6k44 gold badges3838 silver badges6464 bronze badges asked May 16, 2018 at 6:13 Anup GuptaAnup Gupta 15911 silver badge66 bronze badges 4

• 1 I copy paste the source just adding the e and it looks ok – guradio Commented May 16, 2018 at 6:15
• No I cannot use Jquery, I m working on a plugin called "Visual Composer" in the backend of wordpress pages. and Jquery is not supported there. so I need to do this via plain JS only – Anup Gupta Commented May 16, 2018 at 6:18
• Consider adding that information to the question, otherwise it reads like you want to use jQuery but can't make it work, in which case the answer is either use plain JavaScript (as you want) or making jQuery work (which you don't). – David Thomas Commented May 16, 2018 at 6:31
• wordpress does suppport jquery. you need to use jQuery instead of $. try below code jQuery ('.wpb_vc_column').click(function(e) { alert(); e.preventDefault(); jQuery (this).find('.vc_controls').addClass('show-controls'); }); or you can wrap your function in anonymous functoin (function($) { // $ Works! You can test it with next line if you like // console.log($); })( jQuery ); – Sumit Parkash Commented May 16, 2018 at 6:32

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can use querySelectorAll() to select all the elements with class wpb_vc_column and associate the click event to each element. Then click on these element will find the child elements with class vc_controls and add the class to it.

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>

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

make use of querySelector method and and search for child in parent element

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

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

.show-controls {
  color: red
}

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

本文标签： javascriptOn click add class to child element without JqueryStack Overflow