JSFiddle - React, Tailwind, and code Playground

by Alex Baumgertner

HTML

<script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
<div class="js-hint hint">
  <div class="hint__content">hint__content</div>
</div>
<div class="js-hint hint">
  <div class="hint__content">hint__content</div>
</div>
<div class="js-hint hint">
  <div class="hint__content">hint__content</div>
</div>

CSS

.js-hint {
  border: 1px solid;
  margin: 10px;
}

.js-hint:nth-child(2n) {
  color: green;
}

.hint__content--right-show
{
  color: red;
}

JavaScript

var hint = document.querySelectorAll('.js-hint');

console.log(hint);

for (var i = 0; i < hint.length; i++) {

  hint[i].addEventListener('click', function(e) {

    e.preventDefault();

    console.log(this);

    // находит в нужной ноде нужный селектор
    var hintContent = this.querySelector('.hint__content');

    // не может добавить к этой ноде класс(
    hintContent.classList.toggle('hint__content--right-show')
  });

}