如何使单击事件适用于具有同一类的多个元素？

我试图在每次用户单击多个图块时实现翻转效果，这有点像仪表板类型网页的开始。如何使点击事件适用于多个同名类？

所有图块都具有相同的类名，但在不同的“box”div 下，jquery 单击事件似乎仅在添加的最后一个图块中实现，而其他图块保持静态。我似乎无法弄清楚是什么原因造成的，我一直在寻找答案。这是点击事件代码的最后一次修订：

var i = 0,
abbrs = document.getElementsByClassName("tile"),
len = abbrs.length;

function addEvent(abbr) {
    abbr.addEventListener("click", function(event) {
        $(this).toggleClass("flip");
    })

}

for (i; i < len; i++){

    addEvent(abbrs[i]);
}

我似乎无法弄清楚问题的根源在哪里。

考虑这个代码笔纯 JavaScript 解决方案。

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

const targets = document.getElementsByClassName('target');
for (var i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click', function(){
        this.classList.toggle("flipped");
    })
}

或者考虑这是一个 jQuery 解决方案.

<p class="target">flip me</p>
<p class="target">flip me</p>
<p class="target">flip me</p>

.flipped {
  color: red;
}

$('.target').on('click', function() {
  $(this).toggleClass('flipped');
});

EDIT:

查看您给定的代码后，我刚刚意识到您通过非常大的填充来定位绝对 div，这不是正确的方法。而是使用top|right|bottom|left用于定位（请参阅此处的文档）。更改 css 后，即使使用混乱的 javascript，您的示例也能完全正常工作。看这里