Как убрать класс у элемента через приватный метод?

Рейтинг: 1Ответов: 1Опубликовано: 09.02.2023

Имеется несколько радио-кнопок, при нажатии на конкретную радио-кнопку у нее должен добавляться класс 'checked' и соответственно убираться, когда эта кнопка не выбрана. В моем случае, ставится 'checked', но он не убирается при выборе другой кнопки. Подскажите, пожалуйста, что нужно поправить?

class Task {
    constructor(taskTemplateSelector, data, radioButton, openButton, modalTextArea, changeModalDescription) {
        this._taskTemplateSelector = taskTemplateSelector;
        this._shortName = data.shortName;
        this._id = data.id;
        this._radioButton = radioButton;
        this._openButton = openButton;
        this._modalTextArea= modalTextArea;
        this._description = data.description;
        this._changeModalDescription = changeModalDescription;
    };
    //Частный метод, возвращающий шаблон задачи 
    _getTemplate() {
        const taskTemplate = document.querySelector(this._taskTemplateSelector).content.querySelector('.form__label').cloneNode(true);
        return taskTemplate;
    };

    //Частный метод, устанавливающий слушатель на элемент
    _setEventListener() {
        const currentRadio = this._newTask.querySelector(this._radioButton);
        currentRadio.addEventListener('input', () => { 
            const checkedElement = currentRadio.querySelector('.checked') 
            if (checkedElement) { 
                checkedElement.classList.remove('checked');
            }
            currentRadio.classList.add('checked');
            this._openButton.disabled = false;
            this._openButton.classList.remove('open-button__disabled');
            currentRadio.id = this._id;
            this._changeModalDescription(this._description);
        });
    };
    //Публичный метод, возвращающий готовый элемент
    createTask() {
        this._newTask = this._getTemplate();
        const taskText = this._newTask.querySelector('.form__task-text');
        taskText.textContent = this._shortName;
        this._setEventListener();
        return this._newTask;
    };
}

export {Task};
import { Task } from '../components/task.js';
import { Modal } from '../components/modal.js';
import { ResultSpace } from '../components/resultSpace.js';

//место в разметке, где располагаются задачи 
const taskList = document.querySelector('.task-list'); 
//массив с задачами 
const tasks = [ 
    {id: 1, shortName: "Сортировка по возрастанию", description: "Дан массив [9, 19, 3, 10, 786, 1, 1, 20, 31], с помощью метода sort необходимо отсортировать его по возрастанию"}, 
    {id: 2, shortName: "Фильтрация строк", description: "Дан массив строк [‘кот’, ‘собака’, ‘птица’, ‘крот’, ‘метод’, ‘функция’, ‘плод’, ‘кит’, ‘слон’]. Из исходного массива необходимо получить массив с теми строками, чья длина не более 4 символов"}, 
    {id: 3, shortName: "Поиск уникального слова", description: "Дан массив [‘яблоко’, ‘слива, ‘дыня, ‘груша’, ‘груша’, ‘дыня’, ‘яблоко’, ‘арбуз’, ‘арбуз’]. Необходимо определить слово, которое встречается в массиве один раз"}, 
    {id: 4, shortName: "Количество повторений", description: "Дан массив [‘яблоко’, ‘слива, ‘дыня, ‘груша’, ‘груша’, ‘дыня’, ‘яблоко’, ‘арбуз’, ‘арбуз’]. На основе этого массива необходимо сформировать объект, где ключ – это слово из массива, а значение – количество вхождений этого слова в массив"}, 
    {id: 5, shortName: "Большие гласные буквы", description: "Дана цитата: Зима — это гравюра, весна — акварель, лето — масляная живопись, а осень — мозаика всех трех. Необходимо вернуть строку, в которой все гласные буквы будут большими"} 
]; 
const modalOpen = new Modal('.modal', '.modal-text');
const openButton = document.querySelector('.open-button'); 
const modalButton = document.querySelector('.modal-button'); 
const result = document.querySelector('.result');
const resultSpace = new ResultSpace(result, '.enter-space', '.checked', arrangeNumbers, excludeWords, findUniqueWords, writeWordsNumber, changeSentence);

const createTask = (task) => { 
    const newTask = new Task('.task-template', task, '.form__check', openButton, '.modal-text', (data) => modalOpen.changeModalTextArea(data));
    return newTask.createTask(); 
}; 
 
tasks.forEach((task) => {
    taskList.append(createTask(task));
}); 
 
openButton.onclick = () => { 
    modalOpen.openModalWindow();
};

modalButton.onclick = () => {
    resultSpace.changeResultText();
}

Ответы

▲ 0Принят

Пример, как может выглядеть класс без дополнительных селекторов

    const tasks = [
        {id: 1, shortName: "Сортировка по возрастанию", description: "Дан массив [9, 19, 3, 10, 786, 1, 1, 20, 31], с помощью метода sort необходимо отсортировать его по возрастанию"},
        {id: 2, shortName: "Фильтрация строк", description: "Дан массив строк [‘кот’, ‘собака’, ‘птица’, ‘крот’, ‘метод’, ‘функция’, ‘плод’, ‘кит’, ‘слон’]. Из исходного массива необходимо получить массив с теми строками, чья длина не более 4 символов"},
        {id: 3, shortName: "Поиск уникального слова", description: "Дан массив [‘яблоко’, ‘слива, ‘дыня, ‘груша’, ‘груша’, ‘дыня’, ‘яблоко’, ‘арбуз’, ‘арбуз’]. Необходимо определить слово, которое встречается в массиве один раз"},
        {id: 4, shortName: "Количество повторений", description: "Дан массив [‘яблоко’, ‘слива, ‘дыня, ‘груша’, ‘груша’, ‘дыня’, ‘яблоко’, ‘арбуз’, ‘арбуз’]. На основе этого массива необходимо сформировать объект, где ключ – это слово из массива, а значение – количество вхождений этого слова в массив"},
        {id: 5, shortName: "Большие гласные буквы", description: "Дана цитата: Зима — это гравюра, весна — акварель, лето — масляная живопись, а осень — мозаика всех трех. Необходимо вернуть строку, в которой все гласные буквы будут большими"}
    ];

    class Task {
        static activeDiv = null;
        constructor(taskTemplateSelector, data, radioButton, openButton, modalTextArea, changeModalDescription) {
            this._taskTemplateSelector = taskTemplateSelector;
            this._shortName = data.shortName;
            this._id = data.id;
            this._radioButton = radioButton;
            this._openButton = openButton;
            this._modalTextArea= modalTextArea;
            this._description = data.description;
            this._changeModalDescription = changeModalDescription;
        };
        //Частный метод, возвращающий шаблон задачи
        _getTemplate() {
            const div = document.createElement('div');
            div.classList.add('task');
            const radio = document.createElement('input');
            radio.type = 'radio';
            radio.name = 'radioButton'
            radio.value = this._id;
            const self = this;
            radio.addEventListener('input', function () {
                Task.clicker(self.div);
            })
            div.append(radio);
            const h = document.createElement('span');
            h.innerHTML = this._shortName;
            div.append(h);
            const d = document.createElement('div');
            d.innerText = this._description;
            div.append(d)
            this.div = div;
            return div;
        };
        //Публичный метод, возвращающий готовый элемент
        createTask() {
            return this._getTemplate()
        };

        static clicker(div) {
            div?.classList.toggle('active');
            this.activeDiv?.classList.toggle('active')
            this.activeDiv = div;
        }
    }

    // ----------------------------
    const modalOpen = null; //new Modal('.modal', '.modal-text');
    const openButton = document.querySelector('.open-button');
    const modalButton = document.querySelector('.modal-button');
    const result = document.querySelector('.result');
    //const resultSpace = new ResultSpace(result, '.enter-space', '.checked', arrangeNumbers, excludeWords, findUniqueWords, writeWordsNumber, changeSentence);
    // ----------------------------

    const createTask = (task) => {
        return new Task('.task-template', task, '.form__check', openButton, '.modal-text', (data) => modalOpen.changeModalTextArea(data)).createTask();
    };

    const taskList = document.querySelector('.task-list');
    tasks.forEach((task) => {
        taskList.append(createTask(task));
    });
    .active {
        background-color: chartreuse;
    }
    .task {
        border: 1px solid #c0c0c0;
        margin: 5px;
        padding: 10px;
    }
    .task > div {
        margin-top: 5px;
    }
<div class="task-list">

</div>