0

Необходимо, чтобы при клике добавлялся класс "general-info__grid-view". В моём коде необходимый класс добавляется только к первому параграфу, а нужно, чтобы добавлялся ко всем параграфам. Мой код:

document.getElementById("grid").onclick = function() {
  document.body.querySelector(".general-info__description").classList.
  remove("general-info__grid-none");
  document.body.querySelector(".general-info__description").classList.
  add("general-info__grid-view");
}
.general-info__grid-none {
  display: none;
}

.general-info__grid-view {
  display: block;
  float: left;
  margin: 0;
}
<div id="grid">grid</div>
<div class="general-info__records-container">
  <p class="general-info__description general-info__grid-none">Covering:</p>
</div>
<div class="general-info__records-container">
  <p class="general-info__description general-info__grid-none">Type:</p>
</div>

2 ответа 2

2

querySelector возвращает только один элемент. Вам нужен querySelectorAll

document.getElementById("grid").onclick = function() {
  [...document.body.querySelectorAll(".general-info__description")].forEach(el => {
    el.classList.remove("general-info__grid-none");
    el.classList.add("general-info__grid-view");
  });
}
.general-info__grid-none {
  display: none;
}

.general-info__grid-view {
  display: block;
  float: left;
  margin: 0;
}
<div id="grid">grid</div>
<div class="general-info__records-container">
  <p class="general-info__description general-info__grid-none">Covering:</p>
</div>
<div class="general-info__records-container">
  <p class="general-info__description general-info__grid-none">Type:</p>
</div>

2
  • К сожалению, совсем не работает; никаких изменений при клике
    – Serge
    7 фев 2018 в 21:37
  • @Serge, а в примере почему работает? Посмотри консоль, что сообщает...
    – Air
    9 фев 2018 в 7:16
-1
document.getElementById("grid").onclick = function () {

var generalInfo = document.querySelectorAll(".general-info__description");

    generalInfo.forEach(function(generalInfo) {
        generalInfo.classList.add("general-info__grid-view");
    });
};
1
  • Зачем давать такой-же ответ, как и дал Darth. Бессмысленно.
    – And
    9 фев 2018 в 7:21

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.