選擇“收音機”時更改div的背景顏色

選擇輸入時，我需要更改輸入（無線電型別）的父 div 的背景顏色，但是，如果用戶選擇另一個輸入，則原始 div 需要恢復為原始顏色，并更改 div新選擇的輸入。到目前為止，我只做了一個根據所選輸入更改 div 顏色的函式，所以如果我單擊另一個輸入，兩個 div 的顏色都會改變。我為此搜索了解決方案，但找不到任何解決方案。到目前為止，代碼是這樣的：

function changeBg(posicao) {
  var changer = document.getElementById(posicao);
  if (changer.checked = true) {
    changer.style.backgroundColor = "#FFCE00";
  }
}

<div class="posicao" id="um">
  <input class="input-posicao " onclick="changeBg('um')" name="posicao" value="um" type="radio">
</div>

<div class="posicao" id="dois">
  <input class="input-posicao " onclick="changeBg('dois')" name="posicao" value="dois" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('tres')" name="posicao" value="tres" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('quatro')" name="posicao" value="quatro" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('cinco')" name="posicao" value="cinco" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('seis')" name="posicao" value="seis" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('sete')" name="posicao" value="sete" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('oito')" name="posicao" value="oito" type="radio">
</div>

<div class="posicao">
  <input class="input-posicao" onclick="changeBg('nove')" name="posicao" value="nove" type="radio">
</div>

在列印中，您可以看到如果我選擇 2 個輸入會發生什么..

uj5u.com熱心網友回復：

您不需要將事件偵聽器附加到每個單選按鈕。只需圍繞每個創建一個包裝器并在那里監聽change事件（事件委托）。

并且樣式可以通過例如active類的css來完成。active可以從先前活動的元素中洗掉。然后添加到當前活躍的一個。

document.querySelector('.radiogroup').addEventListener('change', (evt) => {
  // evt.currentTarget is the .radiogroup element
  // and we search for all elements with the active class
  evt.currentTarget
    .querySelectorAll('.active')
    .forEach(element => {
      // remove the active class from those elements
      element.classList.remove('active')
    })
  
  
  // in this simple case evt.target is the radio button 
  // that became active for more complex event delegation you
  // need to check what evt.target is.
  // search for the ascendant with the class posicao
  // and add the active class to it
  evt.target
    .closest('.posicao')
    .classList.add('active');
}, true);

.posicao {
  display: inline-block;
  background: grey;
}

.active {
  background-color: yellow;
}

<div class="radiogroup">
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
  <div class="posicao">
    <input name="posicao" type="radio">
  </div>
</div>

uj5u.com熱心網友回復：

首先，在 html 檔案中呼叫行內函式不是一個好習慣，在腳本中添加一個事件偵聽器并在那里處理用戶輸入：

const radios = document.querySelectorAll('input[type="radio"]');
radios.forEach(radio => {
   radio.onclick = () => {
      radios.forEach(radio => {
         radio.style.backgroundColor = radio.checked ? '#FFCE00' : '#ffffff';
      });
   }
});

uj5u.com熱心網友回復：

在這里，您是一個適用于您的 prob 的作業 vanilla js 函式。

但是你錯過了從第二個 'posicao' div 到最后的 id，添加正確的 id。

function changeBg(id) {
        let changer = document.getElementById(id);
        let all = document.getElementsByClassName('posicao');
        console.log(all);
          for (let i =0; i<all.length; i  ){
              all[i].classList.remove('color')
          }
        changer.classList.add("color");
        
    }
</script>

標籤：javascript html css

上一篇：為什么ReactRouter將我帶到正確的路徑，但不顯示相應的組件？

下一篇：不列印執行任務的順序