Question

好的，我希望我只是想轻松一点。基本上，我要在待办事项列表中的每个列表项中都出现一个复选框（此方法有效）。当用户单击复选框时，应该将textDecoration =“ line-through”通过listItem类。这意味着一行人要完成该人创建的待办任务。这是我主要使用的代码：

function show() {
var todos = get_todos();

var html = '<ul>';
for(var i=0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
};
html += '</ul>';

document.getElementById('todos').innerHTML = html;

var buttons = document.getElementsByClassName('remove');
for (var i=0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
};

////////////////////////////////////
//Everything above here works. Below is the checkbox issue

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}

如果我在原始复选框中创建onClick函数，那么现在可以使用if / else语句，它可以正常工作。如果使用document.getElementsByClassName设置checkBox / listItems变量，它将不起作用，但如果使用document.getElementById，则它将起作用。问题在于它仅在用户创建的第一个任务上起作用，而在此之后创建的其他任务均不起作用。我认为这是因为Ids仅适用于一个元素（与适用于多个元素的类不同），或者因为其未循环通过for循环，就像上面的代码中那样。

TL / DR 基本上，当我运行以上代码时，我不断收到“ Uncaught TypeError：无法设置未定义的属性'textDecoration' 在展会上（todo.js：57）在todo.js：75“。

当我为复选框创建一个单独的函数并使用elementbyid而不是elementsbyclass时，也不会出现此错误（也更改了上面html部分的id / class）

我真的很想让那些直通效果在所有任务上都能发挥作用，而不仅仅是第一个。任何想法都将不胜感激。谢谢大家！

Answer 1

我将使用CSS而不是javascript（如果可能的话，通常是我的规则）来完成此操作。在这种情况下，您必须对标记做一些小改动：由于没有previous-sibling选择器，因此必须将input放在相应的li之前，但是由于li是float:left，它仍然呈现完全相同的内容。

input:checked + li {
  text-decoration:line-through;
}

<ul>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">foo</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">bar</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
<span><input class="checkBox" type="checkbox"><li class="listItem" style="float:left;">baz</li><button class="remove" id="' + i  + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>
</ul>

Answer 2

function show() {
  var todos = get_todos();

  var html = '<ul>';
  for (var i = 0; i < todos.length; i++) {
    html += '<span><li class="listItem" style="float:left;">' + todos[i] + '</li><input class="checkBox" type="checkbox">' + '<button class="remove" id="' + i + '"><i class="fa fa-trash" aria-hidden="true"></i></button></span><br/>';
  };
  html += '</ul>';

  document.getElementById('todos').innerHTML = html;

  var buttons = document.getElementsByClassName('remove');
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener('click', remove);
  };

  ////////////////////////////////////
  //Everything above here works. Below is the checkbox issue

  var checkBox = document.getElementsByClassName("checkBox");
  var listItem = document.getElementsByClassName("listItem");

  for (var i = 0; i < checkBox.length; i++) {
    if (checkBox[i].checked == true) {
      listItem[i].style.textDecoration = "line-through";
    } else {
      listItem[i].style.textDecoration = "none";
    }
  };
}

您可能错过了listItem和checkBox数组中的索引

Answer 3

我认为问题在于checkBox是一个类似数组的对象。我想您知道，当您编写代码时，您会查看checkBox.length，但是随后您无法索引到数组中。

您有：

var checkBox = document.getElementsByClassName("checkBox");
var listItem = document.getElementsByClassName("listItem");

for (var i=0; i < checkBox.length; i++) {
    if (checkBox.checked == true){
        listItem.style.textDecoration = "line-through";
    }else {
        listItem.style.textDecoration = "none";
    }
};}

为了清楚起见，我在需要的地方添加了多个名称，并添加了索引引用：

var checkBoxes = document.getElementsByClassName("checkBox");
var listItems = document.getElementsByClassName("listItem");

for (var i=0; i < checkBoxes.length; i++) {
    if (checkBoxes[i].checked == true){
        listItems[i].style.textDecoration = "line-through";
    }else {
        listItems[i].style.textDecoration = "none";
    }
};}

无法将复选框属性应用于for循环

3 个答案: