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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

虽然你的代码会起作用，但它仍然是一个代价高昂的过程，因为每次点击它都必须从DOM中获取特定标记的元素，＆amp;将循环通过它。而是通过函数传递此上下文。

希望此代码段有用

<强> 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>

是将函数附加到每个元素的正确方法

3 个答案: