开发者问题收集

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

2019-02-15
55
javascript for-loop if-statement

好吧，我希望我只是错过了一些简单的东西。基本上，我正在制作一个待办事项列表，我希望每个列表项都出现一个复选框（这有效）。当用户单击复选框时，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’ at show (todo.js:57) at todo.js:75”。

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

我真的希望这些划线效果适用于所有任务，而不仅仅是第一个任务。任何想法都非常感谢。谢谢大家！

3个回答

我会使用 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>
nvioli
2019-02-15
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 数组中的索引

Ritik Patni
2019-02-15

我认为问题在于 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";
    }
};}
Euan Smith
2019-02-15