Javascript для обновления цикла firebase

Question

Javascript для обновления цикла firebase

У меня есть новостная лента, использующая Firebase, и я хотел бы иметь возможность «проверять» все новости как прочитанные одним щелчком мыши.

HTML:

<ul id="news" class="dropdown-menu" role="menu">
<li id="newsitem_read">Mark all as read</li>
<li id="-K230_cSX_TOYlXfSjul" class="newsitem unread-true">message</li>
<li id="-K247s6SLY4AGliAUIik" class="newsitem unread-true">message</li>
<li id="-K24820ZIQR8LqThIRFb" class="newsitem unread-true">message</li>
</ul>

Javascript:

var news = greatnonsens.child('users/<?=$_SESSION['user']['id']; ?>/news_feed/');

var read = document.getElementById('newsitem_read');

read.addEventListener('click', function() {

var to_read = document.getElementsByClassName('unread-true');

// Check news feed is not empty
if (typeof to_read[0] !== 'undefined') {
for (var i = 0; i < to_read.length; i++) {
news.child(to_read[i].id).update({unread: 'false'});
// document.getElementById(to_read[i].id).className = 'newsitem unread-false';
console.log(to_read[i].id);
}
}
});

Это работает, но если я также запускаю document.getElementById (to_read [i] .id) .className = ‘newsitem unread-false’, он обновляет только каждый второй новостной элемент (то же самое с функцией Firebase on. (Child_changed)). Если я закомментирую это, все новости будут обновлены.

Что мне не хватает?

1

firebase javascript php

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Призыв к getElementsByClassName возвращает так называемый жить список узлов. Когда вы удаляете unread-true класс, элемент также удаляется из to_read,

Скажем, вы начинаете с 4 пунктов в to_read:

0. item1
1. item2
2. item3
3. item4

В первой итерации цикла: i=0так что вы удалите item1, Поскольку список жить, item1 также немедленно удаляется из to_read:

0. item2
1. item3
2. item4

Во второй итерации: i=1так что вы удалите item3, Это снова сразу удаляет это из to_read, который становится:

0. item2
1. item4

В следующей итерации: i=2, так как to_read.length Теперь также 2, мы выходим из цикла.

Решение

Есть много способов справиться с этим. Я приведу один из более простых, который заключается в переборе элементов в обратном порядке:

    for (var i = to_read.length-1; i >= 0; i--) {
news.child(to_read[i].id).update({unread: 'false'});
// document.getElementById(to_read[i].id).className = 'newsitem unread-false';
console.log(to_read[i].id);
}

С этим кодом мы начнем с i=3, Когда мы удаляем unread-true класс из этого элемента, он также удаляется из to_read снова. Но теперь в следующей итерации цикла, i=3 а также to_read по-прежнему имеет 2 элемента, поэтому цикл продолжается.

1