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

是否正确地向每个元素提供函数？而且我的功能还可以吗？是否将函数附加到每个元素的正确方法

<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'; 
     } 
    } 
}

它的工作方式，但我不知道它是否正确。

来源

2016-11-21 Тома Томов

使用'this'和将参考当前元素。所以需要使用for循环 – Mahi

非常感谢！ –

虽然你的代码将工作，但它仍然将是一个昂贵的过程，因为每个点击都来自与DOM特定的标签，通过它&将循环获取元素。而是将这个上下文与函数一起传递。

希望这个片段将是有益的

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

来源

2016-11-21 09:16:27 brk

当然是！非常感谢你！ –

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>

来源

2016-11-21 09:14:46 Mahi

使用CSS伪Ç lass :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>

来源

2016-11-21 09:19:05

这是一个更好的答案，但它应该突出整个李 – brk

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

回答

相关问题