问用CSS或Javascript制作动画到伪类

EN

要小心返回元素的getElementsByClassName数组，而在单个元素上应该调用addEventListener。

如果您使用的是像jQuery这样的助手库，您就可以这样做，而不必担心操作了多少元素。

对于类似于您的示例中的香草元素，您应该迭代元素数组。

addSuccess函数中的另一个问题是:如何选择要应用新类success的特定元素？在添加迭代之后，它将盲目地将新类应用于每个元素。

最后，addEventListener将一个函数作为第二个参数，而不是一个表达式(就像带有参数的函数一样)。如果调用addSuccess("sharer")返回了一个函数，它就可以工作了。

由此产生的代码：

function addSuccess(event) { 
    var clickedButton = event.target;
    clickedButton.classList.add("success");
}

var buttons = document.getElementsByClassName("sharer");

for(var i = 0; i < buttons.length; i += 1) {
    buttons[i].addEventListener("click", addSuccess, false);
}   

演示：http://codepen.io/anon/pen/PPeLRp

请注意，一旦添加了success类，您还缺少一个CSS规则将您的菱形粘贴到顶部。实际上，你的钻石只有在悬停时才能到达顶端。

缺少的规则是：

.sharer.success::before {
    top: -208%;
}

你需要的是：

var shares = document.getElementsByClassName("sharer");

function addSuccess() {
  this.classList.add('success');
}

Array.prototype.forEach.call(shares, function(share) {
  share.addEventListener('click', addSuccess);
});

您的代码不能工作的原因是它使用所有元素和className 'share‘，并试图将事件侦听器添加到HTMLCollection本身。您需要的是将此事件侦听器添加到每个元素中。您可以通过forEach方法来完成这一任务，但这是数组对象的方法，因此您必须使用Array.prototype.forEach.call(shares, fn)- -这允许在HTMLCollection上使用HTMLCollection方法。

在提供的(function(share))，中，将每个元素作为参数fn传递，然后将事件侦听器添加到其中。在事件侦听器中的函数中，您可以访问它--它是一个元素，您在其中添加了事件。

为了更好的理解，我的答案不能提供，你可以看看MDN。