javascript - 在不使用 jquery 检查时在多组单选按钮的父元素上添加样式

Question

我在将 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>

Answer 1

这段代码在没有 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 的引用，但它们可以被算法替换，以在更动态的结构中动态查找所需的节点。我希望您能找到方向，并且可以改进和修改代码以满足您的应用程序需求。