Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Изменение поведения выбранных чекбоксов (https://javascript.ru/forum/misc/84220-izmenenie-povedeniya-vybrannykh-chekboksov.html)

NovichokJS 10.07.2022 17:32

и это мне понравилось еще :lol: :

NovichokJS
Кандидат Javascript-наук
Карма: +12

NovichokJS 10.07.2022 18:11

Рони, у меня уже получилось всё синхронизировать и теперь работает как надо, спасибо!!!

рони 10.07.2022 18:30

NovichokJS,
делайте полноценные примеры, и менять надо только состояние const tasks, остальное всё лучше перенести в render

NovichokJS 10.07.2022 22:27

Цитата:

Сообщение от рони (Сообщение 546591)
NovichokJS,
делайте полноценные примеры, и менять надо только состояние const tasks, остальное всё лучше перенести в render

а что вы имеете ввиду "полноценные примеры"?

касательно этого "менять надо только состояние const tasks, остальное всё лучше перенести в render" - помогите пожалуйста.

Сейчас функционально то работает. Но понятно, что нужно улучшить код, рефакторинг...Вот весь итоговый код:

<body>
    <h1 class="title">Todo List</h1>
    <main class="todo-list">
      <div class="actions">
        <input class="task-input" type="text" />
        <button class="btn create-task-btn">Create</button>
      </div>
      <ul class="list"></ul>
    </main>
    <script src="index.js"></script>
  </body>


const tasks = [
  { text: 'Buy milk', done: false },
  { text: 'Pick up Tom from airport', done: false },
  { text: 'Visit party', done: false },
  { text: 'Visit doctor', done: true },
  { text: 'Buy meat', done: true },
];

const listElem = document.querySelector('.list');

const renderTasks = tasksList => {
  const listItemsElems = tasksList
    .sort((a, b) => a.done - b.done)
    .map(({ text, done }) => {
      const listItemElem = document.createElement('li');
      listItemElem.classList.add('list__item');
      if (done) {
        listItemElem.classList.add('list__item_done');
      }

      const checkboxElem = document.createElement('input');
      checkboxElem.setAttribute('type', 'checkbox');
      checkboxElem.checked = done;
      checkboxElem.classList.add('list__item-checkbox');

      listItemElem.append(checkboxElem, text);

      return listItemElem;
    });

  listElem.append(...listItemsElems);
};

renderTasks(tasks);

const clickButton = document.querySelector('.create-task-btn');

const handlerButton = () => {
  const getTask = document.querySelector('.task-input');
  if (getTask.value !== '') {
    tasks.push({ text: getTask.value, done: false });

    const getListItemElem = document.createElement('li');
    getListItemElem.classList.add('list__item');
    getListItemElem.innerText = getTask.value;

    const getCheckboxElem = document.createElement('input');
    getCheckboxElem.setAttribute('type', 'checkbox');
    getCheckboxElem.classList.add('list__item-checkbox');

    listElem.prepend(getListItemElem);
    getListItemElem.prepend(getCheckboxElem);
    getTask.value = '';
  }
};

clickButton.addEventListener('click', handlerButton);

const handlerChexbox = () => {
  const lis = Array.from(listElem.querySelectorAll('.list__item'));
  const before = [],
    after = [];
  for (let li of lis) {
    if (li.querySelector(':checked')) {
      li.classList.add('list__item_done');
      after.push(li);
    } else {
      li.classList.remove('list__item_done');
      before.push(li);
    }
  }

  listElem.append(...before, ...after);
};
listElem.addEventListener('click', handlerChexbox);


Как привести к такому порядку:
при добавлении / изменении задачи - сначало добавить бы / обновить соответствующий элемент в массиве, где хранятся таски. После этого, заново отрисовать весь список в соответствии с обновленным массивом - вызов функции render.

рони 10.07.2022 23:41

NovichokJS,
<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>
<body>
    <h1 class="title">Todo List</h1>
    <main class="todo-list">
        <div class="actions">
            <input class="task-input" type="text" />
            <button class="btn create-task-btn">Create</button>
        </div>
        <ul class="list"></ul>
    </main>
    <script>
        const tasks = [{
                text: 'Buy milk',
                done: false
            },
            {
                text: 'Pick up Tom from airport',
                done: false
            },
            {
                text: 'Visit party',
                done: false
            },
            {
                text: 'Visit doctor',
                done: true
            },
            {
                text: 'Buy meat',
                done: true
            },
        ];
        const listElem = document.querySelector('.list');
        const renderTasks = tasksList => {
            const listItemsElems = tasksList
                .sort((a, b) => a.done - b.done || (a.text > b.text ? 1 : -1))
                .map(({
                    text,
                    done
                }, i) => {
                    const listItemElem = document.createElement('li');
                    listItemElem.classList.add('list__item');
                    if (done) {
                        listItemElem.classList.add('list__item_done');
                    }
                    const checkboxElem = document.createElement('input');
                    checkboxElem.setAttribute('type', 'checkbox');
                    checkboxElem.checked = done;
                    checkboxElem.dataset.i = i;
                    checkboxElem.classList.add('list__item-checkbox');
                    listItemElem.append(checkboxElem, text);
                    return listItemElem;
                });
            listElem.innerHTML = '';
            listElem.append(...listItemsElems);
        };
        renderTasks(tasks);
        const clickButton = document.querySelector('.create-task-btn');
        const handlerButton = () => {
            const getTask = document.querySelector('.task-input');
            let text = getTask.value.trim();
            if (text) {
                tasks.push({
                    text,
                    done: false
                });
                getTask.value = '';
                renderTasks(tasks);
            }
        };
        clickButton.addEventListener('click', handlerButton);
        const handlerChexbox = ({
            target: {
                dataset: {
                    i
                }
            }
        }) => {
            tasks[i].done = !tasks[i].done;
            renderTasks(tasks);
        };
        listElem.addEventListener('change', handlerChexbox);
    </script>
</body>
</html>

NovichokJS 11.07.2022 10:41

спасибо, круто!

NovichokJS 11.07.2022 10:57

правда вот только не понял вообще что тут происходит:

const handlerChexbox = ({

            target: {

                dataset: {

                    i

                }

            }

        }) => {

            tasks[i].done = !tasks[i].done;

            renderTasks(tasks);

        };

рони 11.07.2022 11:17

NovichokJS,
при формировании checkbox записывается его индекс в dataset. строка 54
checkboxElem.dataset.i = i;

когда происходит изменение этого элемента в listElem.
строка 84
listElem.addEventListener('change', handlerChexbox);


этот индекс извлекается из dataset, находится элемент массива (объект) с таким же индексом и в этом объекте изменяется свойство done, на противоположное, было false, станет true и наоборот.

рони 11.07.2022 11:24

NovichokJS,
тоже самое ...
const handlerChexbox = (event) => {
            let target = event.target;
            let i = target.dataset.i;
            let obj = tasks[i];
            if(obj.done === true) obj.done = false;
            else obj.done = true;
            renderTasks(tasks);
        };

NovichokJS 11.07.2022 11:37

теперь понял, спасибо!


Часовой пояс GMT +3, время: 22:24.