是將功能附加到每個元素的正確方法

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>