我尝试使用按钮更改文本样式，但无法使其适用于具有相同 id 的多个

Question

我正在尝试制作一个按钮，可以添加和删除网站某些部分的样式，在本例中更改元素的背景颜色。

虽然按钮在它们是一个元素时工作正常，但当我有两个元素时，例如第一个元素和第三个元素，按钮仅影响第一个元素，而不是所有具有相同 id 的元素。

我希望我能解释一下，好吧，我对编码很陌生，这是我的第一个网站，所以请善待哈哈哈哈

<button class="body" onclick="changeBlue()">Make Blue</button>
<button class="body" onclick="changePink()">Make Pink</button>

<span class="body" id="blue">thing One</span>
<span class="body" id="pink">thing Two</span>
<span class="body" id="blue">thing three</span>

 
.blue { font-family: Helvetica;
        font-size: 18px;
        color: #ffffff;
        background-color:#003eff;
     } 
  
.pink { font-family: Helvetica;
        font-size: 18px;
        color: #ffffff;
        background-color:#eb00ff;
     }

.body { font-family: Helvetica;
        font-size: 18px;
        color: #000000;
        background-color:#ffffff;
     }
 

var blue = document.getElementById('blue');
function changeBlue() {
  for(var i = 0; i < blue.classList.length; i++) {
    if(blue.classList[i].indexOf('body') >= 0) {
      blue.classList.remove('body');
      blue.classList.add('blue');
    } else { 
      blue.classList.remove('blue');
      blue.classList.add('body'); 
    }
  }
}


var pink = document.getElementById('pink');
function changePink() {
  for(var i = 0; i < pink.classList.length; i++) {
    if(pink.classList[i].indexOf('body') >= 0) {
      pink.classList.remove('body');
      pink.classList.add('pink');
    } else { 
      pink.classList.remove('pink');
      pink.classList.add('body'); 
    }
  }
}

Answer 1

上述代码的问题在于，多个元素具有相同的

id

。这在 javascript 中是无效的，它总是只会执行第一个

id

的代码。

您可以在此处阅读有关

getElementById

使用的更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

我已将

blue

转换为类，而不是元素

thing One

和

thing three

的 id。现在将使用附加类

selected

添加和删除所需的颜色。见下图：

HTML：

<button class="make_blue" onclick="changeBlue()">Make Blue</button>
<button class="make_pink" onclick="changePink()">Make Pink</button>

<span class="body blue">thing One</span>
<span class="body" id="pink">thing Two</span>
<span class="body blue">thing three</span>

CSS：

    .blue.selected {
        font-family: Helvetica;
        font-size: 18px;
        color: #ffffff;
        background-color: #003eff;
    }

    .pink {
        font-family: Helvetica;
        font-size: 18px;
        color: #ffffff;
        background-color: #eb00ff;
    }

    .body {
        font-family: Helvetica;
        font-size: 18px;
        color: #000000;
        background-color: #ffffff;
    }

JS：

    function changeBlue() {
        var blueElements = document.getElementsByClassName('blue');
        for (var i = 0; i < blueElements.length; i++) {
            if (blueElements[i].classList.contains('selected')) {
                blueElements[i].classList.remove('selected');
            } else {
                blueElements[i].classList.add('selected');
            }
        }
    }

    function changePink() {
        var pinkElement = document.getElementById('pink');
        if (pinkElement.classList.contains('pink')) {
            pinkElement.classList.remove('pink');
            pinkElement.classList.add('body');
        } else {
            pinkElement.classList.remove('body');
            pinkElement.classList.add('pink');
        }
    }