Question

如果点击 but子,例如(去除牛桶或添加桶),所选的风格是完全没有工作?

i think somthing went wrong in renderList function but i can t find it. i check other lines and i don t find the my mistake

const inputEl = document.getElementById("input-item");
const addBtn = document.querySelector(".add-btn");

let lists = [];

const renderList = () => {
  const listContainer = document.querySelector(".list-container");
  listContainer.innerHTML = "";

  lists.forEach((item) => {
    const liContainer = document.createElement("li");
    liContainer.setAttribute("id", item.id);
    liContainer.classList.add("list", item.selected ? "selceted" : "not");

    const listName = document.createElement("p");
    listName.innerText = item.name;
    listName.addEventListener("click", () => markSelected(item.id));

    const iconBtn = document.createElement("img");
    iconBtn.setAttribute("src", "/icons/close-square-svgrepo-com.svg");
    iconBtn.addEventListener("click", () => deletList(item.id));

    liContainer.appendChild(listName);
    liContainer.appendChild(iconBtn);
    listContainer.appendChild(liContainer);
  });
};

const addList = () => {
  const inputVal = inputEl.value;
  let list;

  if (inputVal.trim() !== "") {
    list = {
      id: Date.now(),
      name: inputVal,
      selected: false,
    };
  }

  inputEl.value = "";
  lists.push(list);
  renderList();

  console.log(lists);
};

addBtn.addEventListener("click", (e) => {
  addList();
});

const deletList = (id) => {
  lists = lists.filter((list) => list.id !== id);
  renderList();
};

const markSelected = (id) => {
  lists = lists.map((list) => {
    if (list.id === id) {
      list.selected = !list.selected;
    }

    return list;
  });
  updateList(id);
};

const updateList = (id) => {
  const listElement = document.getElementById(id);
  if (listElement) {
    const task = lists.find((item) => item.id === id);
    if (task.selected) {
      listElement.classList.add("selected");
    } else {
      listElement.classList.add("selected");
    }
  }
};

renderList();

repo: https://github.com/MahzyarSaadat/todo-list/tree/main

我试图找到解决办法

Answer 1

停止宣布身份识别标志,因为固定身份或不能更改。

For example, you’ve got…

const listName = document.createElement("p");
    listName.innerText = item.name;

一种不变的意思是,在使用时,它会使用CAN NEVER和WILL NEVER CHANGE VALUE。

Constant declarations are useful for PRE-SET things like the days of the week, or the months of the year, which never change.

Constants are great for O/S memory management because the O/S knows the identifier will never grow or shrink in memory size (remains fixed), so it is moved to the top of the code segment and the O/S doesn t have to worry about it any more.

因此,如果你计划在声明之后确定其价值,就不宣布身份识别。

Btw, 看看你的 de子......你应当看到几吨错误,告诉你你不会改变。

Answer 2

It is quite helpful if you create a sandbox example that people can test/reproduce.

The issue is most likly to do with your css / styles.
When you are adding the selected class with

liContainer.classList.add("list", item.selected ? "selceted" : "not");

it is actually adding two space separated class s list selected or list not.
To add a style to a space-separated class, you need to set up .list.not and .list.selected classes in a style sheet.

。 (说明close-square-svgrepo-com) 图像在沙箱中赢得工作

友情链接