Question

我只想将样式应用于一个单选按钮。我最后点击的那个。

我有多个div，其class =“ sizes”如下：

<div class="sizes">
    <!---->
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="PP" value="PP">
        <label class="size-label" for="PP">
            <!---->PP
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="P" value="P">
        <label class="size-label" for="P">
            <!---->P
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="M" value="M">
        <label class="size-label" for="M">
            <!---->M
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="G" value="G">
        <label class="size-label" for="G">
            <!---->G
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1" style="background: red;">
        <input type="radio" name="size-button" class="size" id="GG" value="GG">
        <label class="size-label" for="GG">
            <!---->GG
            <!----></label>
    </div>
    <!---->
</div>

我通过以下方式将背景色应用于单击的按钮 event.target.parentNode.style.background = "red";

现在，如果我单击另一个按钮，则背景颜色也将在此处应用。我可以使用s for loop从所有元素中删除样式，如下所示，但这似乎不是一种有效的方法。我该如何有效地做到这一点？

const allSizeElements = document.querySelectorAll(".size");
for (let i = 0; i < allSizeElements.length; i++ ) {
  allSizeElements[i].style.background = "none";
}

我考虑过仅使用CSS来执行此操作，但是我不知道如何定位以下对象的父选择器；

[type='radio']:checked
    background: red

Answer 1

对您的检查状态使用特定的类。我用作.checked类名。然后执行以下步骤...

首先，您需要为所有广播元素设置点击监听器。
在点击侦听器内部，从先前单击的单选元素中删除.checked类，然后再添加到当前单击的元素中

const allSizeElements = document.querySelectorAll(".size input");
for (let i = 0; i < allSizeElements.length; i++ ) {
  allSizeElements[i].addEventListener('click',function(event) {
    var prevRadio = document.querySelector('.checked');
    if(prevRadio) prevRadio.classList.remove('checked');
    event.target.parentNode.classList.add("checked"); 
   });
}

.checked {
    background: red;
}

<div class="sizes">
    <!---->
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="PP" value="PP">
        <label class="size-label" for="PP">
            <!---->PP
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="P" value="P">
        <label class="size-label" for="P">
            <!---->P
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="M" value="M">
        <label class="size-label" for="M">
            <!---->M
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="G" value="G">
        <label class="size-label" for="G">
            <!---->G
            <!----></label>
    </div>
    <!---->
    <div class="size" data-children-count="1">
        <input type="radio" name="size-button" class="size" id="GG" value="GG">
        <label class="size-label" for="GG">
            <!---->GG
            <!----></label>
    </div>
    <!---->
</div>

如何从以前单击的元素中删除样式？

1 个答案: