Стилизует несколько элементов DOM, которые имеют одно и то же имя класса, но стилизуют только тот элемент, который вызвал событие?

Question

РЕДАКТИРОВАТЬ: Я нашел это решение:

task_container.addEventListener('click', checkBox);

    function checkBox (event) {
        if (event.target.className === 'check' ) {

            var nearest_task = event.target.parentElement.previousSibling.children[0];

            if (event.target.checked === true) {
                nearest_task.style.textDecoration = 'line-through';
                nearest_task.style.textDecorationColor = 'tomato';
            } else if (event.target.checked === false) {
                nearest_task.style.textDecoration = 'none';
            }

       }
    }

ПОЖАЛУЙСТА, ОТВЕТЬТЕ С ЛЮБЫМИ ОПТИМИЗИРОВАННЫМИ / АЛЬТЕРНАТИВНЫМИ РЕШЕНИЯМИ НИЖЕ.

Я сделал список веб-приложений, который создает списки карточек со своими задачами. Я сделал это так, что когда вы добавляете задачу в указанную карточку списка, она добавляет ее к вашей карточке списка вместе с «флажком задачи» и «кнопкой удаления задачи».
Это изображение флажка, отмеченного и не применяющего указанный стиль для каждой связанной задачи.

Я получил кнопку удаления задачи, чтобы работать над каждой отдельной задачей, но могу 'Похоже, что привязка к событию корректно работает на флажке. Он работает на всех картах, но только когда есть только одна задача для «отметки», когда вы добавляете другую задачу, она работает только на самой последней добавленной задаче и перестает работать на всех предыдущих задачах?

У меня естьпопытался использовать event.target в качестве условия в операторе if и в его блоке кода, чтобы он мог запускать блок кода только для «конкретного» флажка, а не только для «любого», если это имеет смысл. Я также подумал, что может быть проблема с делегированием событий, так как прослушиватель событий установлен на переменную 'check' вместо узла выше в дереве DOM, который может прослушивать все события щелчка, но когда я это делаю, он вообще перестает работать.

Похоже, что событие запускается правильно, но это может быть переменная задачи в условном операторе if / else, которая не применяет текстовое оформление должным образом?

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


                // Checks to see if there was no input
                if (input_task.value === '') {
                    alert('Please enter a task.');
                }

                // Checks to see if the input is only WHITESPACE
                else if (input_task.value.match(/^\s*$/)) {
                    // Clears '.input-task' input field
                    input_task.value = '';
                    alert('WHITESPACE-ONLY is not allowed.');
                } 

                else if (task_list.childElementCount <= 7) {

                    // Creates '.task_container' div element
                    task_container = document.createElement('div');
                    task_container.className = 'task-container';
                    task_list.appendChild(task_container);

                    // Creates '.task-wrapper' div element
                    task_wrapper = document.createElement('div');
                    task_wrapper.className = 'task-wrapper';
                    task_container.appendChild(task_wrapper);

                    // Creates '.task' li element
                    task = document.createElement('li');
                    task.className = 'task';
                    task.textContent = input_task.value;
                    input_task.value = '';
                    task_wrapper.appendChild(task);

                    option_wrapper = document.createElement('div');
                    option_wrapper.className = 'option-wrapper';
                    task_container.appendChild(option_wrapper);

                    // Creates 'check' input(checkbox) element
                    check = document.createElement('input');
                    check.type = 'checkbox';
                    check.name = 'check';
                    check.className = 'check';
                    option_wrapper.appendChild(check);

                    check.addEventListener('click', checkBox);

                    function checkBox (event) {
                        if (event.target.className === 'check' ) {

                            var isChecked = check.checked;
                            if (isChecked) {
                                // event.target.value = 'complete';
                                task.style.textDecoration = 'line-through';
                                task.style.textDecorationColor = 'tomato';
                            } else {
                                // event.target.value='incomplete';
                                task.style.textDecoration = 'none';
                            }

                        }
                    }


                    // Creates 'trash' button element
                    trash = document.createElement('button');
                    trash.className = 'trash';
                    trash.textContent = 'Delete';
                    option_wrapper.appendChild(trash);

                    trash.addEventListener('click', function () {
                        event.target.closest('.task-container').remove();
                    });

                }

Я ожидаю установить и снять флажок для данной задачи, и он применяет text-decoration: line-through или text-decoration: none к связанному элементу задачи. Однако, как я упоминал ранее, это, кажется, не применимо, когда в списке несколько задач. Работает только с самой последней добавленной задачей?

Answer 1

Я ожидаю установить и снять флажок для данной задачи, и он применяет text-decoration: line-through или text-decoration: none к соответствующему элементу задачи.

Если я правильно понимаю ваш вопросвы находитесь на правильном пути, используя event.target.

Используя прослушиватель событий onchange вместо onclick, вы можете гарантировать, что прослушиватель событий будет срабатывать только тогда, когда установлен флажок илиснимите флажок.

Затем вы можете переключить класс на родительском флажке, используя classList.toggle().

Рабочий пример:

const taskList = document.getElementsByClassName('tasklist')[0];

const updateTaskStatus = (event) => {
  event.target.parentNode.classList.toggle('done');
}

taskList.addEventListener('change', updateTaskStatus, false);

.done {
  color: rgb(191, 191, 191);
  text-decoration: line-through;
}

<form>
<ul class="tasklist">
<li><input type="checkbox" /> Task 1</li>
<li><input type="checkbox" /> Task 2</li>
<li><input type="checkbox" /> Task 3</li>
</ul>
</form>