主页 / 问题 / 1592426
Accepted
alexWithoutBeard
Asked:2024-08-31 02:01:42 +0000 UTC2024-08-31 02:01:42 +0000 UTC

单击 li，将其序列号添加到末尾

  • 772

给定 ul 列表。通过单击任何 li，将其在列表中的序列号添加到末尾，但仅添加一次。

我访问了每个 li 并创建了一个所有 li 的数组，以使用每个 li 的索引作为索引号......就是这样）

let lis = document.querySelectorAll("li");
let arr = [...document.querySelectorAll("li")];

for (const li of lis) {
  li.addEventListener("click", func);
  function func() {
    for (let i = 0; i < arr.length; i++) {
      li.innerHTML = li.innerText +[i];
    }
  }
}
<ul>
  <li>dasdasd</li>
  <li>dasdasd</li>
  <li>asdasdad</li>
  <li>dasdasdas</li>
</ul>

javascript

5 个回答

  1. document.addEventListener('click', e => {
  e.target.closest('li')?.classList.add('clicked')
})
    ul { counter-reset: li 0; }
li { counter-increment: li; }
li.clicked:after { content: "(" counter(li) ")"; }
    <ul>
  <li>Первый
  <li>Второй
  <li>Третий
  <li>Четвёртый
  <li>Пятый
  <li>Шестой
  <li>Седьмой
  <li>Восьмой
</ul>

    • 3
  2. Best Answer

    document.addEventListener('click', e => {
  var li = e.target.closest('li')
  if (!li || li.classList.contains('clicked')) return
  li.classList.add('clicked')

  var i = Array.prototype.indexOf.call(li.parentElement.children, li)
  li.insertAdjacentText('beforeend', " (" + (i+1) + ")")
})
    <ul>
  <li>Первый
  <li>Второй
  <li>Третий
  <li>Четвёртый
  <li>Пятый
  <li>Шестой
  <li>Седьмой
  <li>Восьмой
</ul>

    • 3
    1. 获取所有 li，并为每个 li 附加一个带有处理程序的“click”事件
    2. 每次单击时，为了确定当前元素的索引，需要迭代整个列表并查找相应的对象。
    3. 一旦找到目标元素，插入元素可能会有所不同，但要点是您必须添加指向已插入内容的指针并检查它们，以便不存在重复项 - !e.target.querySelector('span')。以最简单的方式添加 - e.target.insertAdjacentHTML('beforeend', <span>${index}</span>);

    let lis = document.querySelectorAll("li");

lis.forEach(li => li.addEventListener('click', e => {

  if (e.target.querySelector('span')) return;

  lis.forEach((el, index) => {
    if (e.target === el) {
      e.target.insertAdjacentHTML('beforeend', `<span>${index}</span>`);
    }
  });

}));
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <ul>
    <li>0dasdasd</li>
    <li>1dasdasd</li>
    <li>2asdasdad</li>
    <li>3dasdasdas</li>
  </ul>
</body>

</html>

    基于以下答案之一的更简洁的解决方案。

    let lis = document.querySelectorAll("li");

lis.forEach((li, indx) => li.addEventListener('click', e => {
  if (e.target.querySelector('span')) return;
  e.target.insertAdjacentHTML('beforeend', `<span>${indx}</span>`);
}));
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <ul>
    <li>0dasdasd</li>
    <li>1dasdasd</li>
    <li>2asdasdad</li>
    <li>3dasdasdas</li>
  </ul>
</body>

</html>

    • 1

  4. 并且一定要用JS？也许是尼娜达？ :3

    /* legacy style */
*:checked + label:after{
  content: counter(list-item); /* встроенный счетчик для LI внутри UL / OL
  который к слову, можно пощупать через <li VALUE='*'> */
  color: blue;
  background: gray;
  position: absolute;
  right: 0;
}

/* впереди паравоза style
https://webref.ru/css/has
p.s. за работоспособность :HAS`a не ручаюсь, ибо под рукой только FF 91 */
li:has(*:checked){
  list-style: decimal inside;
  direction: rtl;
  background: gold;
  color: darkgray;
}

li{
  border: 1px solid red;
  background: pink;
  display: list-item;
  position: relative;
}
label{display: block; text-align: center;}
input{display: none}
    <ul>
  <li><label><input type='radio'>Feel</label></li>
  <li><label><input type='radio'>the</label></li>
  <li><label><input type='radio'>magic</label></li>

  <li><input type='radio' id='r1'><label for='r1'>of</label></li>
  <li><input type='radio' id='r2'><label for='r2'>pure</label></li>
  <li VALUE='57'><input type='radio' id='r3'><label for='r3'>CSS</label></li>
  <li><input type='radio' id='r4'><label for='r4'>...</label></li>
  <li><input type='radio' id='r5'><label for='r5'>...</label></li>
  <li><input type='radio' id='r6'><label for='r6'>...</label></li>
</ul>

    • 1

相关问题