Question

我是javascript学习者的初学者。在没有任何解决方案的情况下，我被这些问题阻止了几天，这是我的演示：create invitee from

以下是流程：

1.在栏中输入一些文本并点击提交按钮

2.您将看到一个框，您将看到两个按钮：编辑按钮和删除按钮

3.请点击编辑按钮在编辑模式和保存模式之间切换

我的问题是，一旦我修改了被邀请者框中的输入值，css就消失了，当我查看html文件时，我注意到<div class="row justify-content-center" id="guestsList">已更改为<div class="col-5 item" id="guestsList">

我完全不知道发生了什么以及如何修复它，如果有人能给我一些很棒的建议！谢谢你的帮助

Answer 1

这个花哨的盒子的所有css都在row类中。

你在eventListener中重置了这个类：

if (checked) {
  list.className = "col-5";
  list.className += " item-choose";
} else {
  list.className = "col-5";
  list.className += " item";
}

你可以为添加和删除这样的类做一个很好的方法：

function addClass(el, className) {
  if (el.classList)
    el.classList.add(className)
  else if (!hasClass(el, className)) el.className += " " + className
}

function removeClass(el, className) {
  if (el.classList)
    el.classList.remove(className)
  else if (hasClass(el, className)) {
    var reg = new RegExp('(\\s|^)' + className + '(\\s|$)')
    el.className=el.className.replace(reg, ' ')
  }
}

然后尝试这个：

if (checked) {
  addClass(list, "item-choose");
} else {
  removeClass(list, "item-choose");
}

见这里：https://jsfiddle.net/yofyfzm7/2/

修改输入值后，css样式消失

1 个答案: