主页 / user-554028

Aiden's questions

Martin Hope
Aiden
Asked: 2024-11-13 22:47:32 +0800 CST
  • 7

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

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

问题：如何缩短两块代码（现有的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
Martin Hope
Aiden
Asked: 2024-10-28 02:33:12 +0800 CST
  • 5

您需要单击一个按钮来添加新列和新行，代码可以工作，但不完全。再次单击按钮时，行末尾的单元格不会添加，并且表格像梯子一样移动，我不明白缺少什么。

let table = document.getElementById('table');
let button = document.getElementById('button');

for (let i = 1; i <= 2; i++) {
  let tr = document.createElement('tr');
  for (let j = 1; j <= 2; j++) {
    let td = document.createElement('td');
    td.textContent = j;
    tr.append(td)
  }
  table.append(tr)
}

button.addEventListener('click', function() {
  let tr = document.createElement('tr');
  for (let i = 1; i <= 2; i++) {
    let td = document.createElement('td');
    td.textContent = i;
    tr.append(td);

  }
  table.append(tr)

  let trs = document.querySelectorAll('#table tr');
  for (let tr of trs) {
    let td = document.createElement('td');
    td.textContent = 'new';
    tr.appendChild(td);
  }
})
<table id="table"></table>
<button id="button">click me</button>

javascript
Martin Hope
Aiden
Asked: 2024-08-16 00:32:51 +0800 CST
  • 7

如何用js制作相册。

您单击带有动物的相册 - 将打开带有动物图像的页面，您单击带有树木的相册 - 打开带有树木图像的页面，含义很明确。

问题是如何实施这一点。

为 20 个专辑制作 20 个 html 页面显然不是一种选择，我正在考虑制作一个主要 html 文档，并在其中为所有专辑制作一个 html 文档。但我不知道如何写，以便打开不同的相册时，会打开不同的图像。谁能告诉我应该朝哪个方向来实施这个？或者我在哪里可以读到这方面的内容？没有js后端可以做到这一点吗？

<main class="albom">
  <ul class="cards">
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_2229.JPG">
      </a>
    </li>
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_5398.JPG">
      </a>
    </li>
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_5398.JPG">
      </a>
    </li>
    <li class="card">
      <a href="./photos.html">
        <img class="picture" src="./pictures/IMG_5398.JPG">
      </a>
    </li>
  </ul>
</main>
javascript