-1
<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, что попахивает говнокодом.

как сделать технически грамотно?

1 ответ 1

2

Как-то так, думаю.

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>

1
  • спасибо, буду адаптировать под мою задачу! 16 янв 2019 в 19:04

Ваш ответ

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

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