通过CSS或Javascript为伪类制作动画

我做的是用来分享东西的。但我遇到了一些CSS或Javascript问题。我想让

.sharr:：before

在点击事件后移到顶部，它是菱形的，每个按钮的背景都是彩色的

按钮的正常状态（小三角形是菱形背景的一角）

在悬停状态下，按钮将填充整个菱形背景

单击按钮后，菱形背景将飞到顶部

我创建了一个

.success

类名，以便在单击按钮后获得成功状态，但这段Javascript似乎是错误的。我只想将

.success

添加到已单击的

.sharer

。（）

函数addSuccess（currentClass）{
document.getElementsByClassName（currentClass.classList.add（“成功”）；
}
document.getElementsByClassName（“共享”）.addEventListener（“单击”，addSuccess（“共享”），false）您需要的是：

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

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

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

代码不起作用的原因是它使用类名为“share”的所有元素，并试图将事件侦听器添加到HTMLCollection本身。您需要的是将此事件侦听器添加到每个元素中。您可以通过
forEach
方法来实现这一点，但这是数组对象的方法，因此您必须使用
Array.prototype.forEach.call（shares，fn）
-这允许您在HTMLCollection上使用数组方法

在提供的
fn
中，您将每个元素作为参数（函数（share）传递，并向其添加事件侦听器。在事件侦听器中的函数中，您可以访问它-它是一个元素，您向其中添加了事件

为了更好地理解，我的答案无法提供这一点，您可以查看。
请小心返回数组元素的
getElementsByClassName
，而
addEventListener
应在单个元素上调用

如果您使用的是jQuery这样的帮助程序库，那么您就可以完成类似的操作，而不必担心操作了多少元素

对于您的示例中的普通元素，您应该迭代元素数组

另一个问题是
addSuccess
函数：如何选择要将新类
success
应用到的特定元素？按原样（在添加迭代之后），它会盲目地将新类应用于每个元素

最后，
addEventListener
将函数作为第二个参数，而不是表达式（就像带参数的函数一样）。如果调用
addSuccess（“sharer”）
返回了一个函数，那么它就可以工作了

生成的代码：

函数addSuccess（事件）{
var clickedButton=event.target；
单击按钮。类列表。添加（“成功”）；
}
var buttons=document.getElementsByClassName（“sharer”）；
对于（变量i=0；i

演示：

请注意，在添加
success
类后，您还缺少将菱形粘贴到顶部的CSS规则。按原样，您的钻石只有在悬停时才会到达顶部

缺少的规则：

.sharr.success:：before{
前-208%；
}
谢谢！是否需要指定
Array
？
Array.prototype
是必需的，因为它有方法
forEach
。您也可以从已创建的数组中获取此方法，如：
[].forEach.call（…）
。或者您可以使用ES2015中的
array.from（HTMLCollection）
从您的HTMLCollection创建数组，并将其用于您需要的所有数组方法：），但这是您需要的。非常感谢！我有一些问题。
event.target
与
return
是否有些相同？还有，为什么它是
addSuccess
（在addEventListener内部），而不是
addSuccess（按钮[i]）
？谷歌是你的主要信息来源：和。或者就像@Sergey KopyrinThanks所说的那样。我已经在谷歌上搜索过了，但还不确定。（我不熟悉JS。：D）使用
event.target
的
addSuccess
是否意味着采取行动，以及
addSuccess（sth）
是否意味着返回对象？因此后一个在
addEventListener
中不起作用？现在先忘掉
事件.target
。
addEventListener
需要一个函数作为第二个参数。您可以通过以下两种方式给出此函数：1）只需给出其标识符（名称）-无需任何其他内容（这是我的解决方案）；2）通过提供将立即执行的表达式（如
myFunction（someArguments）
），但它必须返回函数；或3）通过声明匿名函数，就像Sergey在
Array.prototype.forEach.call
中所做的那样，“第一种方法”就是我在上面的代码中使用的方法：在某个地方声明一个带有标识符的函数（
addsuces
，正如您所做的那样），然后只提供该标识符作为
addEventListener
的第二个参数。当事件发生时，
addEventListener
将调用该函数，并为其提供一个
事件作为唯一参数，如上所述。