主页 / 问题 / 1061015
Accepted
Frontender
Asked:2020-12-20 11:09:31 +0000 UTC2020-12-20 11:09:31 +0000 UTC

如何在javascript中为点击的元素添加一个类？jQuery 相当于 $(this) [重复]

  • 772

如何将类添加到单击的元素？

如果你这样做：

let li = document.querySelector('.li');
li.addEventListener("click", function() {
  li.classList.add("active");
});
.active {
  color: red;
}
<ul>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Цифры</div>
  </li>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Заглавные буквы</div>
  </li>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Строчные буквы</div>
  </li>
  <li class="li">
    <div class="checkbox"></div>
    <div class="text">Спец. символы: ! @ # $ % ^ & * ( ) - _ + = ; : , . / ? \ | ` ~ [ ] { }</div>
  </li>
</ul>

它只处理对第一个元素的点击。是否有来自 jquery 的 $(this) 的类似物？

javascript

3 个回答

  1. Best Answer
    function liClickHandler(e) {
  this.classList.add("active");
}
let li = document.querySelectorAll('.li').forEach(item => 
  item.addEventListener("click", liClickHandler)
);
    • 3 

  2. //let li = document.querySelector('.li');   получает только первый элемент из массива, так то в данном случае не подходит

// для захвата всех элементов надо использовать  document.querySelectorAll

let li = document.querySelectorAll('.li');

for (let i = 0; i < li.length; i++) { //далее прокручиваем в цикле 
  li[i].addEventListener("click", function() { // при клике 
    if (!this.classList.contains('active')) { // проверяем есть ли у элемента, на котором произошло событие, class "active"
      for (let i = 0; i < li.length; i++) {
        li[i].classList.remove("active"); // а тут удаляем тупо у всех
      }
      this.classList.add("active"); //если нет, добавляем
      console.log("this - ADD");
    } else {
      this.classList.remove("active"); // если есть, удаляем
      console.log("this - remove");
    }
  });
}
    .active {
  color: red;
}
    <ul>
  <li class="li"> Li - 1</li>
  <li class="li"> Li - 2</li>
  <li class="li"> Li - 3</li>
</ul>

    • 1

  3. Element.classList有一个方法toggle，这就是你要找的：

    document.querySelectorAll('.li')
        .forEach(li => li.onclick = () => li.classList.toggle("active"));
    .active {
  background:wheat;
}
    <ul>
  <li class="li">111</li>
  <li class="li">222</li>
  <li class="li">333</li>
</ul>

    • 0

相关问题