是将功能附加到每个元素的正确方法

Question

将功能分配给每个元素是否正确？ 我的功能还可以吗？

<ul id='forShopping'>
                    <li><input class='ch' type='checkbox' onclick='isActive()'> Air-freshener</input></li>
                    <li><input class='ch' type='checkbox' onclick='isActive()'> Pampers</input></li>
                    <li><input class='ch' type='checkbox' onclick='isActive()'> Newspapper</input></li>
                    <li><input class='ch' type='checkbox' onclick='isActive()'> Toilet paper</input></li>
</ul>

function isActive () {
    let elem = document.getElementsByTagName('input');
    for(let i=0; i<elem.length; i++){
        if(elem[i].checked == true){
            elem[i].parentNode.style.backgroundColor = 'forestGreen';
        }else{
            elem[i].parentNode.style.backgroundColor = 'white';
        }
    }
}

它以这种方式工作，但我不确定它是否正确。

Answer 1

 function isActive (a) { if(a.checked == true) a.parentNode.style.backgroundColor = 'forestGreen'; else a.parentNode.style.backgroundColor = 'white'; } 

 <ul id='forShopping'> <li><input class='ch' type='checkbox' onclick='isActive(this)'> Air-freshener</input></li> <li><input class='ch' type='checkbox' onclick='isActive(this)'> Pampers</input></li> <li><input class='ch' type='checkbox' onclick='isActive(this)'> Newspapper</input></li> <li><input class='ch' type='checkbox' onclick='isActive(this)'> Toilet paper</input></li> </ul> 

Answer 2

尽管您的代码可以运行，但是仍然会是一个昂贵的过程，因为每次单击都必须使用DOM中的特定标签来获取元素，并且会在其中循环遍历。 而是通过函数传递此上下文。

希望此片段有用

JS

function isActive(elem) {
 if (elem.checked == true) {
    elem.parentNode.style.backgroundColor = 'forestGreen';
  } else {
    elem.parentNode.style.backgroundColor = 'white';
  }

}

HTML

<ul id='forShopping'>
  <li>
    <input class='ch' type='checkbox' onclick='isActive(this)'> Air-freshener></li>
  <li>
    <input class='ch' type='checkbox' onclick='isActive(this)'> Pampers></li>
  <li>
    <input class='ch' type='checkbox' onclick='isActive(this)'> Newspapper></li>
  <li>
    <input class='ch' type='checkbox' onclick='isActive(this)'> Toilet paper></li>
</ul>

JSFIDDLE

Answer 3

使用css伪类:checked （不需要js）。

示例片段

 label { display: inline-block; } .ch:checked + label { background: red; } 

 <ul id='forShopping'> <li> <input class='ch' type='checkbox' /> <label>Air-freshener</label> </li> <li> <input class='ch' type='checkbox'> <label>Pampers</label> </li> <li> <input class='ch' type='checkbox'> <label>Newspapper</label> </li> <li> <input class='ch' type='checkbox'> <label>Toilet paper</label> </li> </ul>