Javascript 在getElementByClassName不起作用的情况下切换颜色更改

html

javascript

    .like-button {
  text-align: center;
  color: #888;
  font-size: 1.3em;
  font-family: "Heebo", sans-serif;
  background-color: transparent;
  border: none;
  padding: 0.333em 0.7em 0.25em;
  line-height: 1.2em;
  cursor: pointer;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out;
  outline: 0 !important;

}
.like-button:hover {
  color: indianred;
}
.like-button:active {
  transform: scale(0.95);
}
.like-button {
  text-align: center;
  color: #888;
  font-size: 1.3em;
  font-family: "Heebo", sans-serif;
  background-color: transparent;
  border: none;
  padding: 0.333em 0.7em 0.25em;
  line-height: 1.2em;
  cursor: pointer;
  transition: color 150ms ease-in-out, background-color 150ms ease-in-out, transform 150ms ease-in-out;
  outline: 0;
}
.like-button.selected {
  color: #dd2a7b;
}

我的目标是在单击时切换按钮的颜色，就像常规的like按钮一样。 我使用id标签，发现它只适用于第一项。

---

因此，我用class标记更改了代码，但它不起作用

首先，您使用的是

document.getElementByClassName

，它不存在，您应该使用

document.getElementsByClassName

document.addEventListener('DOMContentLoaded', function() {
  var likeButton = document.getElementByClassName("like-button");
  likeButton.addEventListener('click', function() {
    window.lb = likeButton;
    likeButton.classList.toggle("selected");
  });
}, false);

这将返回一个类似数组的对象，您可以迭代该对象以添加事件侦听器：

document.addEventListener（'DOMContentLoaded'，function（）{
var likeButtons=document.getElementsByClassName（“like按钮”）；
for（设i=0；i
.like按钮{
文本对齐：居中；
颜色：#888；
字体大小：1.3em；
字体系列：“Heebo”，无衬线；
背景色：透明；
边界：无；
填充：0.333em 0.7em 0.25em；
线高：1.2米；
光标：指针；
过渡：颜色150ms缓进缓出，背景色150ms缓进缓出，变换150ms缓进缓出；
大纲：0！重要；
}
.喜欢按钮：悬停{
颜色：印度红；
}
.like按钮：活动{
变换：比例（0.95）；
}
.像按钮一样{
文本对齐：居中；
颜色：#888；
字体大小：1.3em；
字体系列：“Heebo”，无衬线；
背景色：透明；
边界：无；
填充：0.333em 0.7em 0.25em；
线高：1.2米；
光标：指针；
过渡：颜色150ms缓进缓出，背景色150ms缓进缓出，变换150ms缓进缓出；
大纲：0；
}
.like-button.selected{
颜色：#dd2a7b；
}

竖起大拇指
12

您拼写错误：var likeButton=document.getElementsByClassName（“like按钮”）
getElementsById
返回元素的集合，而不是单个元素。您应该使用循环：
var likeButtons=document.getElementsByClassName（“like按钮”）；
for（var i=0；i

请在问题中提供错误信息
你测试代码了吗？因为document.getElementByClassName不是任何浏览器实现的标准函数。是你自己实现的吗？如果可以的话，你能给我们看一下代码吗？如果不是，代码将始终引发异常

无论如何

在所有浏览器中实现的标准函数（始终是最佳选择）是document.getElementsByCassName（），它返回一个实时HTMLCollection（简化的类似js数组的结构）
所以你应该这样做：

document.addEventListener（'DOMContentLoaded'，function（）{
//通过分解结构，我们得到集合的第一个元素并实例化var likeButton
var[likeButton]=document.getElementsByClassName（“like按钮”）；
likeButton.addEventListener（'click'，function（）{
window.lb=类似按钮；
likeButton.classList.toggle（“选中”）；
});
}，假）；

片段：
document.addEventListener（'DOMContentLoaded'，函数（）{
//通过分解结构，我们得到数组的第一个元素并实例化var likeButton
var[likeButton]=document.getElementsByClassName（“like按钮”）；
像按钮。addEventListener（'click'，函数（）{
window.lb=类似按钮；
likeButton.classList.toggle（“选中”）；
});
}，假）
.like按钮{
文本对齐：居中；
颜色：#888；
字体大小：1.3em；
字体系列：“Heebo”，无衬线；
背景色：透明；
边界：无；
填充：0.333em 0.7em 0.25em；
线高：1.2米；
光标：指针；
过渡：颜色150ms缓进缓出，背景色150ms缓进缓出，变换150ms缓进缓出；
大纲：0！重要；
}
.喜欢按钮：悬停{
颜色：印度红；
}
.like按钮：活动{
变换：比例（0.95）；
}
.像按钮一样{
文本对齐：居中；
颜色：#888；
字体大小：1.3em；
字体系列：“Heebo”，无衬线；
背景色：透明；
边界：无；
填充：0.333em 0.7em 0.25em；
线高：1.2米；
光标：指针；
过渡：颜色150ms缓进缓出，背景色150ms缓进缓出，变换150ms缓进缓出；
大纲：0；
}
.like-button.selected{
颜色：#dd2a7b；
}

文件
竖起大拇指
12
谢谢，它很管用！我可以再问一个吗？我从codepen获得了此代码，但无法找到使用
window.lb
的原因。
document.addEventListener('DOMContentLoaded', function() {
  var likeButton = document.getElementByClassName("like-button");
  likeButton.addEventListener('click', function() {
    window.lb = likeButton;
    likeButton.classList.toggle("selected");
  });
}, false);

var likeButtons = document.getElementsByClassName("like-button");

var likeButtons = document.getElementsByClassName("like-button");

for (var i = 0; i < likeButtons.length; i++) {
  likeButtons[i].addEventListener('click', function() {
    window.lb = likeButtons[i];
    this/*this == current div element*/.classList.toggle("selected");
  });
}