Question

这是我项目的JSFiddle链接，你可以在这里看到完整的app.js ...... https://jsfiddle.net/be4pLh7s/1/

基本上我正在尝试建立一个联系日记，您可以在其中创建新的联系人，然后可以在以后编辑或删除它们......

第85行的

是编辑和删除按钮的单击事件，我认为我编写这部分代码的方式可能不正确，因为我有重复的循环和if语句。

我已尝试将这些重复的代码部分放入函数中，但随后应用程序崩溃并收到不同的错误。我已经尝试了几个方法来克服这些错误，但仍然无法让它工作或者解决这个问题。

如果代码是正确的，请告诉我......我自己重复一遍吗？如果我有，那么请你告诉我如何在干燥和可读性方面使这些代码更好。谢谢。

如何为“编辑”，“保存”和“删除”按钮编写单独的功能。

这行代码重复3次 -

for (var i = 0; i < contactsBook.length; i++) {
            if (contactsBook[i].firstName === ul.getAttribute('data-person')) {}

这行代码重复2次 -

const ulChild = ul.childNodes;
          for (var j = 0; j < ulChild.length; j++) {
            if (ulChild[j].tagName === "LI") {}

以下是相关代码的一部分 -

//Click event for Edit and Delete buttons.
contacts.addEventListener("click", (e) => {

  if (e.target.tagName === "BUTTON") {
    const button = e.target;
    const ul = button.parentNode;
    if (button.textContent === "Edit") {
      for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person')) {
          const ulChild = ul.childNodes;
          for (var j = 0; j < ulChild.length; j++) {
            if (ulChild[j].tagName === "LI") {
              const items = ulChild[j];
              const input = document.createElement('input');
              input.type = 'text';
              input.value = items.textContent;
              items.textContent = "";
              items.insertBefore(input, ulChild.childNodes);
              button.textContent = 'Save';
            };
          };
        };
      };
    } else if (button.textContent === "Save") {
      for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person')) {
          const ulChild = ul.childNodes;
          for (var j = 0; j < ulChild.length; j++) {
            if (ulChild[j].tagName === "LI") {
              console.log(ulChild[j]);
            };
          };
        };
      };
    } else if (button.textContent === "Delete") {
      contacts.removeChild(ul);
      for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person')) {
          contactsBook.splice(i,1);
          localStorage.setItem('addbook', JSON.stringify(contactsBook));
        };
      };
    };
  };
});

感谢您的帮助！

Answer 1

重复代码不多。如果你想使用更多的javascrpt flare，我只能给出提示。 .forEach而不是loop和.filter的标准，因为你有一个for和if语句。

例如

for (var i = 0; i < contactsBook.length; i++) {
        if (contactsBook[i].firstName === ul.getAttribute('data-person'))
....

可以完成：

contactsBook.filter(book => book.firstName === ul.getAttribute('data-person'))

并不是说它有任何区别。

我重复了JS代码，如何将它们转换为函数

1 个答案: