javascript - 如何在使用 JavaScript 选择单选输入时更改 div 的颜色

Question

我目前遇到的问题是，当选择一个输入时，所有 div 元素都永久更改为红色。我只希望所选输入的 div 变为红色。此外，如果选择了另一个输入，我希望之前的输入恢复到其原始颜色。

这就是我目前所拥有的，代码笔:https://codepen.io/martinlutherwinn/pen/jOEVmGj

function chgCol() {
    var input =[];
    var input = document.getElementsByClassName("Amt_Int");
    var div =[];
    var div = document.getElementsByClassName("Amt_Lal");
    
    for(i=0; i < input.length; i++){
        for(i=0; i < div.length; i++){
            
          if(input[i].checked = true){
            div[i].style.color = "red"; 
            div[i].style.borderColor= "red";
            } else{
                div[i].style.color = "blue"; 
                div[i].style.borderColor= "blue";
            }
        }
    }
}

.DoF_Amt, .Pel_Info,.Pat_Info{
    background-color: white;
    margin-left: 20%;
    margin-right: 20%;  
    color:blue;
    margin-bottom: 5%;
    padding: 5%   
}
.Amt_Cor{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
}
.Amt_Lal{
    display:flex;
    justify-content:center;
    align-items: center;
    border: .3vmin solid rgba(0,0,255,1);
    border-radius: 50%;
    vertical-align: middle;
    padding: 2%;
    height: 10vmin;
    width: 10vmin;
    font-size: 4vmin;
    margin: 2%;
}
.Amt_Int{
    position: absolute;
    clip: rect(0,0,0,0);
    border: 0;
}

<form class="DoF_Amt">
  <h2>Donation Amount</h2>
  <div class="Amt_Cor">
    <div class="Amt_Lal">
      <label>
        <input class="Amt_Int" type="radio" name="amount" value="one" />$1
      </label>
    </div>
    <div class="Amt_Lal" onclick="chgCol()">
      <label>
        <input
          class="Amt_Int"
          type="radio"
          name="amount"
          value="twentyfive"
        />$25
      </label>
    </div>
    <div class="Amt_Lal" onclick="chgCol()">
      <label>
        <input class="Amt_Int" type="radio" name="amount" value="fifty" />$50
      </label>
    </div>
    <div class="Amt_Lal" onclick="chgCol()">
      <label>
        <input
          class="Amt_Int"
          type="radio"
          name="amount"
          value="seventhyfive"
        />$75
      </label>
    </div>
    <div class="Amt_Lal" onclick="chgCol()">
      <label>
        <input
          class="Amt_Int"
          type="radio"
          name="amount"
          value="Custom"
        />Custom
      </label>
    </div>
  </div>
  <script src="/JavaScript/selectedInput.js"></script>
  <button type="button">Donate with PayPal</button>
  <button type="button">Donate with a Card</button>
</form>

Answer 1

通过更改 onclick="chgCol()" 将事件目标传递给您的点击处理程序至 onclick="chgCol({ target })" .然后您可以更加动态地使用react。

更好的解决方案是将事件委托(delegate)给父元素 ( <div class="Amt_Cor"> )。示例如下:

const [clickTarget] = document.getElementsByClassName('Amt_Cor');

clickTarget.onclick = ({ target }) => {
  if (!target.classList.contains('Amt_Lal')) return;
  const currentlyHighlighted = document.querySelector('.highlight');
  if (currentlyHighlighted) currentlyHighlighted.classList.remove('highlight');
  target.classList.add('highlight');
  target.firstElementChild.checked = true;
  console.log(document.querySelector('[name="amount"]:checked').value);
};

.DoF_Amt, .Pel_Info,.Pat_Info{
    background-color: white;
    margin-left: 20%;
    margin-right: 20%;  
    color:blue;
    margin-bottom: 5%;
    padding: 5%   
}
.Amt_Cor{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    justify-content: center;
}
.Amt_Lal{
    display:flex;
    justify-content:center;
    align-items: center;
    border: .3vmin solid rgba(0,0,255,1);
    border-radius: 50%;
    vertical-align: middle;
    padding: 2%;
    height: 10vmin;
    width: 10vmin;
    font-size: 4vmin;
    margin: 2%;
}
.Amt_Lal::after {
  content: "";
  position: absolute;
  width: 15vmin;
  height: 15vmin;
  border-radius: 50%;
}
.Amt_Int {
    position: absolute;
    clip: rect(0,0,0,0);
    border: 0;
}
.highlight {
  border-color: red;
  color: red;
}

<div class="Amt_Cor">  
  <label class="Amt_Lal">
    <input class="Amt_Int" type="radio" name="amount" value="one">$1
  </label>
  <label class="Amt_Lal">
    <input class="Amt_Int" type="radio" name="amount" value="twentyfive">$25
  </label>
  <label class="Amt_Lal">
    <input class="Amt_Int" type="radio" name="amount" value="fifty">$50
  </label>
  <label class="Amt_Lal">
    <input class="Amt_Int" type="radio" name="amount" value="seventhyfive">$75
  </label>
  <label class="Amt_Lal">
    <input class="Amt_Int" type="radio" name="amount" value="Custom">Custom
  </label>                  
</div>