javascript - 如何在 Javascript 中为每个列表项分配一个顺序 ID？ (顺便说一下，在 html 文档中)

Question

这是让我困惑的部分:

<script type="text/javascript">
    //declaring veriables
    var inputField = document.getElementById("input");
    var addBtn = document.getElementById("addBtn");
    var html = "";
    var x = 0;

    addBtn.addEventListener('click', function(){
        var text = inputField.value;
        addToList(text);
    })
    //adds items to list
    function addToList(text){

         html += "<li id=(x+=1)><h4><input type='checkbox' id=(x+=1) onclick= 'clearspecifieditems()'>"+text+"</h4></li>";
        document.getElementById("myList").innerHTML = html;
        inputField.value = "";
    }
    //clears items

    function clearspecifieditems(itemid)
    {
        //delete selected item
    };

所以这里的目标是创建一个待办事项列表(我是编码新手)。 addToList(text) 函数应该创建一个新的列表项并为其分配一个顺序 ID。但是，我似乎无法弄清楚如何让它生成 ID。此外，clearspecifieditems(itemid) 应该获取所有已检查的列表项的 ID，并将其全部清除。

Answer 1

对于问题的第一部分，可以使用类似于添加 text 变量的字符串连接...

function addToList(text) {
  const id = x + 1;
  html += '<li id="' + id + '"><h4><input type="checkbox" id="' + id + '">' + text + '</h4></li>';
  // ..
}

...或使用 template literal :

function addToList(text) {
  const id = x + 1;
  html += `<li id="${id}"><h4><input type="checkbox" id="${id}" />${text}</h4></li>`;
  // ..
}

但是，对于第二部分，如何清除复选框:

我故意将 onclick 排除在上面的代码之外，因为听起来好像您需要一个单独的按钮来清除复选框:

// Grab the button and add an click listener to it
// to call `clearSpecifiedItems` 
const button = document.querySelector('.clear');
button.addEventListener('click', clearSpecifiedItems, false);

function clearSpecifiedItems() {

  // Select all the checked checkboxes using their class
  const selected = document.querySelectorAll('.test:checked');

  // Set their checked property to false (or null)
  selected.forEach(input => input.checked = false);
}

<input class="test" type="checkbox" />
<input class="test" type="checkbox" />
<input class="test" type="checkbox" />
<input class="test" type="checkbox" />

<button class="clear">Clear</button>

请注意，这些输入都没有 ID。我已经使用一个类来代替元素。因此，除非您将 ids 用于其他用途，否则它会使代码的第一部分变得多余。只需使用 CSS 选择器来获取您需要的元素，然后处理它们。无需身份证件!