<div class="wrap">
<div class="elem">
<a class="item" data-type="first">test</a>
</div>
<div class="elem">
<a class="item" data-type="first">test</a>
</div>
<div class="elem">
<a class="item" data-type="first">test</a>
</div>
</div>
как при клике по .item обновлять все .item (их может быть разное количество, ответ бэка), меняя data-type на second, third (может несколько раз выполняться) и т.д на чистом js? копирую элементы в отдельную переменную вешаю в цикле click, не работает для подгруженных элементов (само собой), очищаю wrap, добавляю элементы.
сравниваю data-type после цикла с сохраненными элементами, но т.к элементы могли не успеть подгрузиться, получаем совпадение. нашел решение через setTimeout, что попахивает говнокодом.
как сделать технически грамотно?
Как-то так, думаю.
var startList = 1;
var listLimit = 10;
var listLength;
var wrapper = document.getElementById('wrapper');
var times = 1;
buildList();
function buildList() {
wrapper.innerHTML = '';
listLength = Math.round(Math.random() * listLimit);
for ( var idx = startList; idx < (startList + listLength); idx++) {
console.log(idx);
getTodo(idx)
.then(function(todo) {
var elem = document.createElement('div');
elem.classList.add('elem');
elem.innerHTML = '<a class="item" data-type="' + times.toString() +'">' + todo.title + '</a>';
elem.addEventListener('click', buildList, false);
wrapper.appendChild(elem);
});
}
startList += listLength;
times++;
}
function getTodo(id) {
return fetch('http://jsonplaceholder.typicode.com/todos/' + id.toString())
.then(function(res) {return res.json();})
.catch(function(err) {throw(err);});
}
#wrapper {
min-height: 100px;
min-width: 100px;
background-color: #ccc;
}
<div id="wrapper">
</div>
Подключил все правильно ,вставил график тоже вроде правильно ,а на экран ничего не выводитВ чем проблема?