Как избежать многократного цикла с динамически создаваемыми элементами - чистый Javascript - PullRequest
Новая
       67

Как избежать многократного цикла с динамически создаваемыми элементами - чистый Javascript

0 голосов
/ 01 августа 2020

Я создаю простой список дел, используя только javascript. Я знаю, как достичь желаемого результата с помощью jQuery.

Я создал функцию, которая помещает сквозную строку как текстовое оформление в выполненных задачах.

Для этого я пытаясь выбрать динамически добавленные элементы «li» с помощью querySelectorAll. Затем, просматривая выбор, я добавил addEventListener, «щелчок» которого переключает эффект сквозной строчки.

Я вызываю такую ​​функцию каждый раз, когда новый элемент «li» добавляется в список задач. .

Таким образом, l oop запускается, и событие запускается много раз, поскольку количество элементов «li» в списке растет.

Если цикл повторяется нечетное количество раз , цель «достигнута». Но, естественно, запустить четное количество раз это не сработает.

Есть ли способ решить эту ситуацию, используя для l oop? Если нет, то как лучше всего достичь желаемого результата, используя только чистый javascript. 

const arrTask = [];

    let insertTask = document.querySelector("input");
    insertTask.addEventListener("keydown", e => {
      if(e.keyCode === 13){
        arrTask.push(insertTask.value);
        insertTask.value = "";
        listTasks()
        e.preventDefault();
      }
    })
    
    const getUlist = document.querySelector("ul");
    
    function listTasks(){
      // Add task to the list
        let task = document.createElement("li");
        task.innerHTML = `${arrTask[arrTask.length-1]}<button class="btn btn-danger deletable"><i class="fa fa-trash"></i></button>`
        getUlist.appendChild(task);
        task.classList = "list-group-item list-group-item-action taskContainer d-flex justify-content-between align-items-center";
        markTasks();
        deleteButton();
    }
    
    function markTasks(){
      // Mark done tasks
      let listItem = document.querySelectorAll(".taskContainer");
      for(item of listItem){
        item.addEventListener("click", function(){
        this.classList.toggle("mark")
        console.log(this)
        })
      }
    }

Мой код: https://codepen.io/minatogawa/pen/oNbOqXp?editors=0011

1 Ответ

0 голосов
/ 05 августа 2020

При изменении html DOM, постарайтесь сосредоточиться на реальных объектах. Если вы сохраняете ссылки на объекты, их обновление и удаление будет намного проще, и поиск не потребуется. Это также делает код меньше и чище.

Вот обновленный код для вашего списка задач: 

// Pure JS
const arrTask = [];

const nowUSee = () => {
  let addNew = document.querySelector(".fa-plus");
  let getInput = document.querySelector(".typeTask")
  addNew.addEventListener('click', () =>{
    getInput.classList.toggle("d-none")
  })
}
nowUSee();

let insertTask = document.querySelector("input");
insertTask.addEventListener("keydown", e => {
  if(e.keyCode === 13){
    addTask(insertTask.value);  // append task object to list
    insertTask.value = "";  // reset text field
    e.preventDefault();  // prevent submit
  }
})

const getUlist = document.querySelector("ul");  // todo list

function addTask(txt) {
  let task = document.createElement("li");  // create task html element
  task.innerHTML = `${txt}<button class="btn btn-danger deletable"><i class="fa fa-trash"></i></button>`  // text and delete button
  getUlist.appendChild(task);  // add task element to list element
  task.classList = "list-group-item list-group-item-action taskContainer d-flex justify-content-between align-items-center"; // classes for task element
  task.addEventListener("click", function(){  // add event for toggling strikethrough
        this.classList.toggle("mark")  // class for strikethrough
  })
  task.children[0].addEventListener('click', function(){  // add button event for deleting task
      getUlist.removeChild(task)
    })
}
...