我在将 jquery 代码转换为 javascript 时遇到了问题。 有一组单选按钮,我需要在其父元素上添加样式,就像这样 example .
每组单选按钮的每一次选择都会将一个样式添加到其父级。我需要只使用 Javascript 来处理它。
这是 Demo : 效果应该与第一个链接类似。
即
<ul>
<li class="check"><label for="one">1<input type="radio" id="one" name="test"/></label>
</li>
<li class="check"><label for="two">2<input type="radio" id="two" name="test"/></label>
</li>
</ul>
<ul>
<li class="check"><label for="one">1<input type="radio" id="one" name="test2"/></label>
</li>
<li class="check"><label for="two">2<input type="radio" id="two" name="test2"/></label>
</li>
</ul>
<ul>
<li class="check"><label for="one">1<input type="radio" id="one" name="test3"/></label>
</li>
<li class="check"><label for="two">2<input type="radio" id="two" name="test3"/></label>
</li>
</ul>
最佳答案
这段代码在没有 jQuery 的情况下提供了预期的功能:
function changeEvent(event) {
//add highlight class
this.parentNode.classList.add("highlight");
try {
//remove highlight class from previously selected radio in group
//if already existing
this.parentNode.parentNode.highlightDIV.classList.remove("highlight");
} catch (ignore) {}
//keep the highlighted div as a property of the parent div
this.parentNode.parentNode.highlightDIV = this.parentNode;
}
//select all radio buttons
var radioList = document.querySelectorAll('input[type="radio"]');
//loop through list and add event listener
for (var i = 0; i < radioList.length; i++) {
radioList[i].addEventListener("change", changeEvent, false);
}
它使用对 parentNode
的引用,但它们可以被算法替换,以在更动态的结构中动态查找所需的节点。
我希望您能找到方向,并且可以改进和修改代码以满足您的应用程序需求。
关于javascript - 在不使用 jquery 检查时在多组单选按钮的父元素上添加样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25198225/