Удалить имя класса из nodeList при нажатии на любой узел из того же nodeList

Question

Удалить имя класса из nodeList при нажатии на любой узел из того же nodeList

1

Я новичок в программировании на JavaScript, и я хочу узнать больше. Я хочу удалить имя класса из каждого узла nodeList, когда я нажимаю на любой узел из того же nodeList.

Я написал этот код:

d = document.querySelectorAll(".chat-line__message");
d.forEach(removeHighlight);

function removeHighlight(item){
  item.addEventListener("click", function(){
    item.forEach(function(element){
        element.classList.remove("highlight");
    });
    //for-loop instead of forEach doesn't work either.

  })

}

Что я делаю неправильно? Спасибо.

Furkan Özdemir 31 июль 2018, в 19:28

Источник

0

Вы пытались отладить свой код?
Jeroen Heier 31 июль 2018, в 17:11
0

Я сделал. Мое событие клика не работает.
Furkan Özdemir 31 июль 2018, в 17:12

Теги:

javascript

3 ответа

0

если я понимаю ваши сомнения, чем вы были почти там:

<button onclick="myFunction()">Try it</button>

<div class="myDIV">
This is a DIV element.
</div>
<div class="myDIV">
This is a DIV element.
</div>
<script>
function myFunction()
{
d = document.querySelectorAll(".myDIV");
d.forEach(removeHighlight);
}
function removeHighlight(item) {

   item.classList.toggle("highlight");
}
</script>

Получайте удовольствие в кодировании javascript!

Martin Lietz 31 июль 2018, в 15:32

0

Какова цель "var element = document.getElementById (" myDIV ");" ?
Jeroen Heier 31 июль 2018, в 17:17
0

Извини, Джероен, это из моего тестового кода. спасибо за комментарий (хорошо)
Martin Lietz 10 авг. 2018, в 01:07

0

item - это один элемент... тот, который вы назначаете слушателю кликов.

Вы хотите перебрать коллекцию, чтобы удалить класс из всех элементов коллекции

function removeHighlight(item){
  item.addEventListener("click", function(){
    d.forEach(function(element){
  // ^^ iterate collection
        element.classList.remove("highlight");
    });       

  });

}

charlietfl 31 июль 2018, в 15:00

Ещё вопросы

Я сделал. Мое событие клика не работает.
Какова цель "var element = document.getElementById (" myDIV ");" ?
Извини, Джероен, это из моего тестового кода. спасибо за комментарий (хорошо)

Rick · Accepted Answer · 2018-07-31T14-27-00.000Z

Чтобы удалить класс .highlight из каждого узла в nodeList, проведите по ним в обработчике событий click и удалите из .highlight класс .highlight:

var elements = document.querySelectorAll(".chat-line__message");

elements.forEach(function(item) {
  item.addEventListener("click", function() {
    elements.forEach(function(element) {
      element.classList.remove("highlight");
    });
  })
});

ul {
  list-style-type: none;
  padding: 0;
}

li:hover {
  background: cornflowerblue;
}

.chat-line__message {
  font-size: 20px;
  font-weight: bold;
}

.chat-line__message.highlight {
  background: orange;
}

<ul>
  <li class="chat-line__message highlight">A</li>
  <li class="chat-line__message">B</li>
  <li class="chat-line__message highlight">C</li>
  <li class="chat-line__message">D</li>
  <li class="chat-line__message highlight">E</li>
</ul>

Пожалуйста, @ FurkanÖzdemir, пожалуйста, отметьте мой ответ как принятый. Продолжайте в том же духе и хорошего дня!