使用 getElementsByClassName 切换颜色更改不起作用

Question

html

<div class="btn-group float-right text-center">
 <button class="like-button" type="button">
  <div class="material-icons" style="font-size: 18px">thumb_up</div>
   <text class=like-count>12</text>
 </button>
</div>

css

    .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;
}

javascript

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

我的目标是像普通的点赞按钮一样在点击时切换按钮的颜色。我正在使用 id 标签，发现它只适用于第一项。所以我用 class 标签更改了代码，但它不起作用

Answer 1

首先，您使用的 document.getElementByClassName 不存在，您应该使用 document.getElementsByClassName.

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

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

document.addEventListener('DOMContentLoaded', function() {
  var likeButtons = document.getElementsByClassName("like-button");
  for (let i = 0; i < likeButtons.length; i++) {
    var likeButton = likeButtons[i];
    likeButton.addEventListener('click', function() {
      window.lb = this;
      this.classList.toggle("selected");
    });
  }
}, false);

.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;
}

<div class="btn-group float-right text-center">
  <button class="like-button" type="button">
  <div class="material-icons" style="font-size: 18px">thumb_up</div>
   <text class=like-count>12</text>
 </button>
</div>

由于您的事件侦听器的回调引用了 likeButton，并且由于您使用 getElementsByClassName 来获取多个 likeButton，因此您应该使用 this 以避免使用数组中的最后一个元素。

Answer 2

你拼错了：var likeButton = document.getElementsByClassName("like-button");
getElementsById returns 元素集合，不是单个元素。你应该使用循环：

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");
  });
}

并请在您的问题中提供错误信息

Answer 3

你测试过你的代码了吗？因为 document.getElementByClassName 不是任何浏览器实现的标准功能。你是自己实现的吗？如果那么你能告诉我们代码吗？否则，您的代码将始终抛出异常。

无论如何。
在所有浏览器中实现的标准功能（始终是最佳选择）是 document.getElementsByClassName() wich returns 一个实时 HTMLCollection（简化了一个类似 js 数组的结构）所以你应该这样做：

document.addEventListener('DOMContentLoaded', function() {
  // with destructuring we get the first element of the collection and instanciate the var likeButton
  var [likeButton] = document.getElementsByClassName("like-button");
  likeButton.addEventListener('click', function() {
    window.lb = likeButton;
    likeButton.classList.toggle("selected");
  });
}, false);

片段：

    document.addEventListener('DOMContentLoaded', function () {
        // with destructuring we get the first element of the array and instanciate the var likeButton
        var [likeButton] = document.getElementsByClassName("like-button");
        likeButton.addEventListener('click', function () {
            window.lb = likeButton;
            likeButton.classList.toggle("selected");
        });
    }, false);

    .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;
    }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="btn-group float-right text-center">
        <button class="like-button" type="button">
            <div class="material-icons" style="font-size: 18px">thumb_up</div>
            <text class=like-count>12</text>
        </button>
    </div>
</body>
</html>

无论如何，在我看来，在你的情况下，我会为按钮使用一个 id，select 它与 document.getElementById()。这样获取元素不需要解构，只需要添加事件监听器

使用 getElementsByClassName 切换颜色更改不起作用

toggle clolor change with getElementByClassName not working

javascript

toggle

togglebutton