javascript-如何使点击事件适用于相同名称的多个类

概述我试图在用户每次单击时在多个图块上实现翻转效果,这是仪表板类型网页的开头.如何使点击事件适用于同名的多个类？所有磁贴都具有相同的类名,但是在不同的“ box” div下,jquery click事件似乎仅在添加的最后一个磁贴中实现,而其他磁贴则保持静态.我似乎无法弄清楚是什么原因造成的,并且我一直在寻找答案.这是click事件代码的最新版本：var i =

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

所有磁贴都具有相同的类名,但是在不同的“ Box” div下,jquery click事件似乎仅在添加的最后一个磁贴中实现,而其他磁贴则保持静态.我似乎无法弄清楚是什么原因造成的,并且我一直在寻找答案.这是click事件代码的最新版本：

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

我似乎无法弄清楚问题的根源在哪里.最佳答案考虑使用this Codepen作为纯JavaScript解决方案.

<p >flip me</p><p >flip me</p><p >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");    })}

或考虑this for a jQuery solution.

<p >flip me</p><p >flip me</p><p >flip me</p>.flipped {  color: red;}$('.target').on('click',function() {  $(this).toggleClass('flipped');});

编辑：

在查看了给定的代码之后,我才意识到您通过非常大的填充物来定位绝对div,这不是正确的方法.而是使用顶部|底部|底部进行定位(see here for docs).更改CSS之后,即使使用凌乱的JavaScript,您的示例也可以正常使用. Look here 总结

以上是内存溢出为你收集整理的javascript-如何使点击事件适用于相同名称的多个类 全部内容，希望文章能够帮你解决javascript-如何使点击事件适用于相同名称的多个类 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。