主页 / 问题 / 1599700
Accepted
Aiden
Asked:2024-11-13 22:47:32 +0800 CST2024-11-13 22:47:32 +0800 CST

编辑和删除列表项

  • 772

有一个带有名称的数组，您需要使用该数组的元素创建一个列表，这就完成了。

最终结果：在列表的末尾有一个输入，您可以通过它添加新元素；所有元素（包括新元素）都可以通过单击随附元素旁边的链接进行编辑和删除（删除）。尚未完成，这不是问题）

问题：如何缩短两块代码（现有的li和添加的），以免多次重写函数，无法将它们连接起来，如果可以以某种方式将函数移到for之外，请告诉我。另外，当添加删除链接时，该链接仅添加到现有的 li 中，而忽略添加的链接。

let parent = document.querySelector('ul');
let add = document.getElementById('input');
let array = ['Nani', 'Tom', 'Itan', 'Lilo'];

for (let elem of array) {
  let li = document.createElement('li');
  li.textContent = elem;
  parent.append(li)
  li.addEventListener('click', func);

  function func() {
    let input = document.createElement('input');
    input.value = li.textContent;
    li.textContent = '';
    li.append(input);
    input.addEventListener('blur', function() {
      li.textContent = input.value;
      li.addEventListener('click', func)
    })
    li.removeEventListener('click', func)
  }
}

add.addEventListener('blur', function() {
  let li = document.createElement('li');
  li.textContent = add.value;
  parent.append(li)
  li.addEventListener('click', func);

  function func() {
    let input = document.createElement('input');
    input.value = li.textContent;
    li.textContent = '';
    li.append(input);
    input.addEventListener('blur', function() {
      li.textContent = input.value;
      li.addEventListener('click', func)
    })
    li.removeEventListener('click', func)
  }
})

let lis = document.querySelectorAll('ul li')
for (let li of lis) {
  let link = document.createElement('a');
  link.href = '';
  link.textContent = 'delite';
  li.append(link)
}
<ul id="parent"></ul>
<input id="input">

javascript

2 个回答

  1. 在这里，看看这个选项，我并没有真正改变你的代码逻辑，所以这里仍然有一些需要考虑的地方。我只是优化了代码并添加了一些内容。

    PS：我无法抗拒，用按钮替换了链接，抱歉）

    const parent = document.querySelector('ul');
const add = document.querySelector('input');
const array = ['Nani', 'Tom', 'Itan', 'Lilo'];
const liTemplate = document.querySelector('#item-template').content.querySelector('.list-item');

function setEditMode(txtElem) {
    const editElem = document.createElement('input');
    editElem.value = txtElem.textContent;
    editElem.addEventListener('blur', () => resetEditMode(txtElem, editElem));

    txtElem.style.display = 'none';
    txtElem.after(editElem);
    editElem.focus();
}

function resetEditMode(txtElem, editElem) {
    txtElem.textContent = editElem.value;
    editElem.remove();
    txtElem.style.display = 'block';
}

function createItem(name) {
    const item = liTemplate.cloneNode(true);
    const txtElem = item.querySelector('.item-txt');
    txtElem.textContent = name;

    txtElem.addEventListener('click', () => {setEditMode(txtElem)});
    item.querySelector('.del-button').addEventListener('click', () => item.remove());

    return item;
}

function addItems(names) {
    names.forEach(name => {
        const item = createItem(name);
        parent.append(item);
    });
}

add.addEventListener('blur', () => addItems([add.value]));

addItems(array);
    * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    padding: 30px;
}

.list-item {
    display: flex;
    gap: 20px;
    padding-bottom: 10px;
}
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="index.css">
</head>
<body>
    <ul class="list"></ul>
    <input class="list-add" type="text">

    <template id="item-template">
        <li class="list-item">
            <p class="item-txt"></p>
            <button class="del-button" type="button">delete</button>
        </li>
    </template>
    <script src="index.js"></script>
</body>
</html>

    • 2
  2. Best Answer

    您可以通过以下方式实现编辑和删除：

    单独放置处理函数并在处理程序的 this 上下文中进行操作

    还添加一个单独的函数来创建列表元素和创建删除元素的链接

    我将列表中的文本包装在 span 标记中，以免每次都删除所有内容并重新创建文本和链接。现在文本更改为输入并返回，其他一切都保持不变

    let parent = document.querySelector('ul');
let add = document.getElementById('input');

let array = ['Nani', 'Tom', 'Itan', 'Lilo'];

function createLink(li) {
  let link = document.createElement('a');
  link.href = '';
  link.textContent = 'delite';
  link.addEventListener('click', (e) => {
    e.preventDefault();
    li.remove()
  });
  li.append(link);
}

function func() {
  const item = this;
  let input = document.createElement('input');
  input.value = item.textContent;
  item.textContent = '';
  item.append(input);
  input.addEventListener('blur', function() {
    item.textContent = input.value;
    item.addEventListener('click', func);
  })
  item.removeEventListener('click', func);
}

function createLi(elem) {
  let li = document.createElement('li');
  const span = document.createElement('span');
  span.textContent = typeof elem === 'string' ? elem : this.value;
  span.addEventListener('click', func);
  li.append(span);
  createLink(li);
  parent.append(li);
}

array.forEach(el => createLi(el));

add.addEventListener('blur', createLi);
    <ul id="parent"></ul>
<input id="input">

    为什么没有出现删除链接？ - 因为在创建新列表项时，您不添加链接，并且在编辑元素后，您完全清除了父块并在其中添加了文本

    如果您不喜欢const item = this;func 函数中的这一行，您可以使用箭头函数来创建事件处理程序，因为箭头函数没有自己的上下文

      function func() {
    let input = document.createElement('input');
    input.value = this.textContent;
    this.textContent = '';
    this.append(input);
    input.addEventListener('blur', () => {
      this.textContent = input.value;
      this.addEventListener('click', func);
    })
    this.removeEventListener('click', func);
  }
    • 1

相关问题