使用JavaScript添加检查类

jjhzyzn0 于 2023-11-15 发布在 Java

关注(0)|答案(3)|浏览(90)

我尝试使用事件侦听器将checked类添加到待办事项列表项目中。但是事件侦听器没有附加到每个复选框类。

export default function (){
    const checkedElements = document.querySelectorAll(".checkbox");
    checkedElements.forEach(element => {
        element.addEventListener('click', () => {
            element.classList.toggle('checked');
        });
    });
}

字符串
这里是网站https://joyal-jij0.github.io/todo-list/ &这里是存储库https://github.com/joyal-jij0/todo-list.git。在创建2-4个待办事项后，尝试单击每个复选框。我希望每个复选框都能获得事件侦听器，但有些正在获得，有些正在被删除。

JavaScript

来源：https://stackoverflow.com/questions/77472229/adding-checked-class-using-javascript

3条答案

按热度按时间

zzwlnbp81#

ID必须唯一。
1.通过closest使用委托和相对访问

document.getElementById('tasks').addEventListener('click', (e) => {
  const tgt = e.target;
  const btn = tgt.closest('button');
  const del = tgt.closest('div.delete');
  const chk = tgt.matches(".checkbox");
  if (btn) {
    if (btn.matches('.save')) {
      console.log('save');
    } else if (btn.matches('.cancel')) {
      console.log('cancel');
    }
  }
  else if (del) {
    tgt.closest('div.task').remove()
  }
  else if (chk) {
    tgt.classList.toggle('checked');
  }
});

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  color: hsla(0, 0%, 100%, .9);
}

i {
  color: red;
  cursor: pointer;
}

.leftContainer {
  background-color: #373c3f;
  height: 100vh;
}

.rightContainer {
  background-color: #2f3437;
  height: 100vh;
}

.projects {
  font-size: 32px;
  font-weight: bold;
  font-family: sf-bold sans-serif;
  padding-bottom: 15px;
  border-bottom: solid hsla(0, 0%, 100%, .9);
  margin: 100px 40px 20px 60px;
}

.project {
  margin-left: 60px;
  font-size: 24px;
  background-color: #444a4d;
  margin-right: 30px;
  display: flex;
  justify-content: space-between;
  padding: 10px 20px 10px 10px;
}

.addProject {
  margin-left: 200px;
  font-size: 20px;
  font-family: sf-medium sans-serif;
  margin-top: 30px;
  cursor: pointer;
}

.header {
  margin-top: 9vh;
  display: grid;
  grid-template-columns: 15fr 1fr;
  border-bottom: solid hsla(0, 0%, 100%, .9);
  margin-left: 50px;
  margin-right: 50px;
  font-size: 40px;
  font-family: sf-bold sans-serif;
  font-weight: bold;
}

.task {
  font-size: 30px;
  margin-top: 12px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid hsla(0, 0%, 100%, .4);
  display: grid;
  grid-template-columns: 1fr 15fr 15fr 0.1fr;
  margin-right: 50px;
  margin-left: 30px;
}

.addTask {
  margin-top: 20px;
  font-size: 30px;
  display: flex;
  justify-content: flex-end;
  margin-right: 50px;
  cursor: pointer;
}

.checkbox {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1px solid hsla(0, 0%, 50%, .8);
  cursor: pointer;
}

.checked {
  background-color: #7af76e;
  background-position: 50% 50%;
  background-size: 15px;
  background-repeat: no-repeat;
}

.addToDo {
  font-size: 30px;
  margin-top: 12px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid hsla(0, 0%, 100%, .4);
  margin-right: 50px;
  margin-left: 30px;
  display: flex;
  gap: 20px;
}

#textInput {
  background-color: #444a4d;
  border: none;
  font-family: sans-serif;
  color: #fff;
  font-size: 18px;
  padding: 8px;
  border-radius: 5px;
  width: 100%;
}

#dateInput {
  background-color: #444a4d;
  border: none;
  font-family: sans-serif;
  color: #fff;
  font-size: 18px;
  padding: 8px;
  border-radius: 5px;
  width: 280px;
}

#submit {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 12px;
  border-radius: 5px;
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
  background-color: #00cd00;
  border: #00cd00;
  margin-left: 10px;
}

#cancel {
  font-size: 16px;
  font-family: sans-serif;
  font-weight: bold;
  color: #fff;
  padding: 12px;
  border-radius: 5px;
  margin-top: 0;
  margin-bottom: 0;
  cursor: pointer;
  background-color: red;
  border: red;
  margin-left: 12px;
}

.task-tem {
  font-size: 30px;
  margin-top: 12px;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid hsla(0, 0%, 100%, .4);
  display: grid;
  grid-template-columns: 1fr 15fr 0.1fr;
  margin-right: 50px;
  margin-left: 30px;
}

.name {
  margin-left: 10px;
}

<div id="tasks">

  <div class="task">
    <div class="checkbox"></div>
    <div class="name"> task 1</div>
    <div class="date"></div>
    <div class="delete"><i>✖</i></div>
  </div>

  <div class="task">
    <input type="text" class="textInput" placeholder="Add Task">
    <input type="date" class="dateInput" placeholder="Add deadline">
    <button class="save">Submit</button>
    <button class="cancel">Cancel</button>
  </div>
  <div class="task">
    <input type="text" class="textInput" placeholder="Add Task">
    <input type="date" class="dateInput" placeholder="Add deadline">
    <button class="save">Submit</button>
    <button class="cancel">Cancel</button>
  </div>
</div>

赞(0）回复(0）举报 2023-11-15

jum4pzuy2#

您的代码正在从addTask调用that checked function。
由于checked函数在内部循环遍历所有复选框并添加处理程序，因此它们将具有多个click处理程序，然后将多次来回切换选中状态（如果您在处理程序中添加一个策略性的console.log()，您可以看到这一点）。
您还可以在浏览器的检查器的事件侦听器列表中看到这些多个处理程序;这是我添加4个项目后的第一个复选框。
x1c 0d1x的数据
IOW，你只需要在每个新的复选框中添加一次处理程序。

赞(0）回复(0）举报 2023-11-15

rmbxnbpk3#

事件委托

您可以将事件侦听器添加到父元素而不是每个元素，如下所示：

const parentCheckbox = document.body
parentCheckbox.addEventListener('click', function (event) {
  const element = event.target
  if (element.classList.contains('checkbox')) { // is .checkbox
    element.classList.toggle('checked');
  }
})

.checked {
  box-shadow: 0 0 0 3px lightgreen;
}

<body>
  <p>checkbox class:</p>
  <input type="checkbox" class="checkbox" name="1" />
  <input type="checkbox" class="checkbox" name="1" />
  <input type="checkbox" class="checkbox" name="2" />
  <input type="checkbox" class="checkbox" name="2" />
  <p>not checkbox class:</p>
  <input type="checkbox" name="3" />
  <input type="checkbox" name="3" />
</body>

使用JavaScript添加检查类

3条答案

事件委托

阅读更多：

相关问题

热门标签

最新问答