JavaScript применяет classList.toggle только к элементу onclick - PullRequest
Новая
       5

JavaScript применяет classList.toggle только к элементу onclick

0 голосов
/ 16 ноября 2018

У меня есть функция в моем приложении todo list, которая генерирует мой HTML: 

function updateResults() {
            listItems = todos.reduce((result, item) => {
                result += `<li class="todo">${item}<div class="controls">
                <span class="check" onclick="checkItem()"></span><span class="delete">&#x1F5D1</span></div></li>`;
                return result;
            }, '');
            resultElement = document.getElementById('result');
            // Set inner HTML
            resultElement.innerHTML = listItems;
        }

Если щелкнуть интервал 'check' на одном из сгенерированных элементов, я хочу, чтобы проверялся только этот элемент, но я могу переключать ВСЕ элементы списка одновременно. 

function checkItem() {
            [...document.getElementsByClassName('check')].forEach(function (item) {
                item.classList.toggle('checked');
            });
        }

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

Спасибо, любезно.

1 Ответ

0 голосов
/ 16 ноября 2018

Я предлагаю удалить встроенный onclick (и вашу checkItem функцию) и создать прослушиватель событий, подобный этому 

// listen to all clicks on your page
window.addEventListener('click', (event) => {
  // if the clicked element has a class named check
  if (event.target.classList.contains('check')) {
    // remove or add the class checked only from this element
    event.target.classList.toggle('checked')
  }
})

Таким образом только примененный класс check применяет класс checked.

Подробнее о addEventListener можно прочитать здесь, по адресу MDN .

...