0

При нажатии на кнопку «Добавить статью», появляется форма с двумя полями: Заголовок статьи и Описание статьи и кнопкой закрыть. После нажатия кнопки «Сохранить», статья появляется в списке. При нажатии кнопки «Редактировать» у статьи, вместо заголовка и описания появляются поля для редактирования. При нажатии кнопки «Удалить» у статьи, статья удаляется из списка. Данные о всех элементах должны храниться в свойстве articles объекта List, а также добавляться, редактироваться и удаляться.

Вопрос в том, как получать данные о DOM из объекта Item чтобы была возможность отредактировать статью, а затем сохранённые данные передать в объект List и сохранить. То есть как обработать нажатие на кнопки каждой из статей.Нужно обращаться глобально через document или же сохранять данные о DOM в массиве объектов _self.articles.

Была идея присваивать id каждому созданному Item, чтобы потом по нему получать доступ к child section.articles, но структура страницы в любой момент может измениться, придётся править код, а это не дело. Как быть ?

Ссылка на полный код https://jsfiddle.net/XoldpandaX/4u3xkhsy/6/

    var List = function() {

    var _self = this;
    _self.articles = [];

    var
        body        = document.querySelector('body'),        // body страницы
        addButton   = document.querySelector('._add'),      // кнопка добавить статью
        articles    = document.querySelector('.articles'); // блок статей


    _self.add = function(data) { // сохранить статью в список
        _self.articles.push(data);
    };

    // обработчики кнопок
    addButton.onclick = function() {
        var modal   = document.createElement('div'); // Модальное окно
        modal.className = 'modal';
        modal.innerHTML += View.drawTheModal('Добавить статью',
                                             'Название',
                                             'Описание',
                                             'https://www.youtube.com/video',
                                             'Добавить');
        body.style.overflow = 'hidden';
        body.appendChild(modal);
    };

    body.addEventListener('click', function(e) { // обработка кнопок модального окна
        if (e.target.classList.contains('modal__close')) { // кнопка закрыть
            removeModal();
            body.style.overflow = 'unset';
        } else if (e.target.classList.contains('btn_add-article')) { // кнопка добавить
            var
                modalBodyForm   = body.lastElementChild.firstElementChild.childNodes[1].firstElementChild,
                article = { // объект с заголовком и описанием
                    //значения полей ввода
                    id : _self.articles.length,
                    length: _self.articles.length,
                    youtobeLink: modalBodyForm.childNodes[0].value,
                    title: modalBodyForm.childNodes[1].value,
                    description: modalBodyForm.childNodes[2].value
                },

                item = new Item(article);

            _self.add(item); // добавляем объект article в массив
            displayNewArticleOnPage(article); // отображаем новывй article в блоке articles
            removeModal();
            body.style.overflow = 'unset';
        }
    });

    function displayNewArticleOnPage(data) {

        var article = document.createElement('div');
        article.className = 'article clearfix';

        article.innerHTML += View.drawTheArticle(
            data.youtobeLink,
            data.title,
            data.description
        );

        articles.appendChild(article);

    }

    function removeModal() {

        var modal = body.lastElementChild;
        body.removeChild(modal);

        return true;

    }

};

1 ответ 1

0

Попробуйте так:

    var articles = document.getElementById('articles');

    articles.onclick = function(event) {

      if (event.target.classList.contains('remove')) {
        // Отправляю id для удаления на сервере
        console.log(event.target.parentNode.getAttribute('id')); 

        event.target.parentNode.remove(); 
      }

      if (event.target.classList.contains('edit')) {
        // Собираем данные для вставки в форму редактирования
        console.log(event.target.parentNode);
      }

    }  

Полный пример, только форма редактирования не сделана: https://jsfiddle.net/qLpsg5qx/#&togetherjs=GCoxdNFpwh

Ваш ответ

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

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