Question

正如您在代码中看到的那样，有四个div，每个div都有一个按钮，用于更改其父元素样式（背景颜色）。如何更改所有div的背景颜色属性，除了被同一事件点击的父级除外？

function getId(btnId, prnId) {
  var buttonId = btnId;
  var btnValue = document.getElementById(buttonId).value;
  var parentId = prnId;
  document.getElementById(parentId).style.backgroundColor = btnValue;
  var frameColor = document.getElementById('main');
  frameColor.style.backgroundColor = btnValue;
  var clearOthers = document.getElementsByClassName('colorBox');
  for (i=0;i<clearOthers.length;i++){
    if(clearOthers[i].firstElementChild.innerHTML!=btnValue){
      clearOthers[i].style.backgroundColor="white";
    }
  }
}

<div id="main">
    <div id="redBox" class="colorBox">
        <button id="redBtn" value="red" class="changeColor" onClick="getId(this.id,this.parentNode.id)">RED</button>
    </div>
    <div id="blueBox" class="colorBox">
        <button id="blueBtn" value="blue" class="changeColor" onClick="getId(this.id,this.parentNode.id)">BLUE</button>
    </div>
    <div id="yellowBox" class="colorBox">
        <button id="yellowBtn" value="yellow" class="changeColor" onClick="getId(this.id,this.parentNode.id)">YELLOW</button>
    </div>
    <div id="blackBox" class="colorBox">
        <button id="blackBtn" value="black" class="changeColor" onCLick="getId(this.id,this.parentNode.id)">BLACK</button>
    </div>
</div>

Answer 1

你做得对，但你在分配后清除了颜色，在分配新颜色之前这样做。

function getId(btnId, prnId) {
  var clearOthers = document.getElementsByClassName('colorBox');
  for (var i = 0; i < clearOthers.length; i++) {
    clearOthers[i].style.backgroundColor = "white";
  }
  var buttonId = btnId;
  var btnValue = document.getElementById(buttonId).value;
  var parentId = prnId;
  document.getElementById(parentId).style.backgroundColor = btnValue;
  var frameColor = document.getElementById('main');
  frameColor.style.backgroundColor = btnValue;
}

<div id="main">
  <div id="redBox" class="colorBox">
    <button id="redBtn" value="red" class="changeColor" onClick="getId(this.id,this.parentNode.id)">RED</button>
  </div>
  <div id="blueBox" class="colorBox">
    <button id="blueBtn" value="blue" class="changeColor" onClick="getId(this.id,this.parentNode.id)">BLUE</button>
  </div>
  <div id="yellowBox" class="colorBox">
    <button id="yellowBtn" value="yellow" class="changeColor" onClick="getId(this.id,this.parentNode.id)">YELLOW</button>
  </div>
  <div id="blackBox" class="colorBox">
    <button id="blackBtn" value="black" class="changeColor" onCLick="getId(this.id,this.parentNode.id)">BLACK</button>
  </div>
</div>

Answer 2

你差不多完成了。在匹配if条件时更改value而不是innerHTML

function getId(btnId, prnId) {
  var buttonId = btnId;
  var btnValue = document.getElementById(buttonId).value;
  var parentId = prnId;
  document.getElementById(parentId).style.backgroundColor = btnValue;
  var frameColor = document.getElementById('main');
  frameColor.style.backgroundColor = btnValue;
  var clearOthers = document.getElementsByClassName('colorBox');
  for (i = 0; i < clearOthers.length; i++) {
    if (clearOthers[i].firstElementChild.value != btnValue) {
      clearOthers[i].style.backgroundColor = "white";
    }
  }

}

<div id="main">
  <div id="redBox" class="colorBox">
    <button id="redBtn" value="red" class="changeColor" onClick="getId(this.id,this.parentNode.id)">RED</button>
  </div>
  <div id="blueBox" class="colorBox">
    <button id="blueBtn" value="blue" class="changeColor" onClick="getId(this.id,this.parentNode.id)">BLUE</button>
  </div>
  <div id="yellowBox" class="colorBox">
    <button id="yellowBtn" value="yellow" class="changeColor" onClick="getId(this.id,this.parentNode.id)">YELLOW</button>
  </div>
  <div id="blackBox" class="colorBox">
    <button id="blackBtn" value="black" class="changeColor" onCLick="getId(this.id,this.parentNode.id)">BLACK</button>
  </div>
</div>

使用Javascript通过同一事件更改多div样式

2 个答案: