多个列表和按钮，但文本输入未保存在正确的列表中

Question

我正在尝试使用多个“添加”按钮在同一页面上创建多个列表。

在文本字段 1 中输入文本并单击 button1 应该只会将内容添加到 list1（星期一）。但是 button1 正在将文本字段 2 中的文本添加到最后加载的 JS 中，即 list2 （星期二）。总共有 8 个列表，我只是想让前 2 个列表正常工作。

这是 JSFiddle：https://jsfiddle.net/sarwech/vrn5s2ns/4/

这看起来没有适当的关闭，我考虑过创建单独的本地函数，但我不太确定......

当我只想将项目添加到每个列表中时，以下方法有效：

document.getElementById("add1").onclick = function() {

var node = document.createElement("Li");
var text = document.getElementById("user_input1").value; 
var textnode=document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("list_item1").appendChild(node);
localStorage.setItem('monday', JSON.stringify(list_item1));
show();

return false; }

document.getElementById("add2").onclick = function() {

var node = document.createElement("Li");
var text = document.getElementById("user_input2").value; 
var textnode=document.createTextNode(text);
node.appendChild(textnode);
document.getElementById("list_item2").appendChild(node); }

感谢任何帮助！

Answer 1

这是因为您有两个 add 函数定义。因为hoisting，后一个定义将抑制前一个。这就是为什么您实际上将星期二点击处理程序绑定到星期二和星期一的添加按钮。

您应该考虑将代码重写为可重用的组件，例如

function DayMeals(id, title) {
  var self = this;

  this.id = id;

  this.$el = document.createElement('div');
  this.$el.classList.add('row');
  this.$el.innerHTML = '<h4>' + title + '</h4><input type="text"/><button>Add</button><ol></ol>';

  this.$list = this.$el.querySelector('ol');
  this.$input = this.$el.querySelector('input');
  this.$addButton = this.$el.querySelector('button');

  this.meals = this.getFromStorage();
  this.updateView();

  this.$addButton.addEventListener('click', function() {
    self.add(self.$input.value);
  });

  this.$el.addEventListener('click', function(e) {
    if (e.target.dataset.remove) {
      self.remove(e.target.dataset.remove)
    }
  });
}

DayMeals.prototype.getFromStorage = function() {
  var storage = localStorage.getItem(this.id);
  return storage ? JSON.parse(storage) : [];
};

DayMeals.prototype.putToStorage = function() {
  localStorage.setItem(this.id, JSON.stringify(this.meals));
};

DayMeals.prototype.add = function(meal) {
  this.meals.push(meal);
  this.putToStorage();
  this.updateView();
};

DayMeals.prototype.remove = function(index) {
  this.meals.splice(index, 1);
  this.putToStorage();
  this.updateView();
};

DayMeals.prototype.updateView = function() {
  var listContent = '';

  this.meals.forEach(function(meal, i) {
    listContent += '<li>' + meal + '<button data-remove="' + i + '">x</button></li>';
  });

  this.$list.innerHTML = listContent;
};

fiddle

Answer 2

您有两个名为“add”的函数，最后一个覆盖了第一个。正确命名它们，即 mondayAdd、tuesdayAdd。其他具有相同名称的函数也是如此：'show'、'remove'。