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

所有磁贴都具有相同的类名,但是在不同的“ 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解决方案.

flip me

flip me

flip me

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

})

}

flip me

flip me

flip me

.flipped {

color: red;

}

$('.target').on('click', function() {

$(this).toggleClass('flipped');

});

编辑：

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

标签：css,html,javascript

来源： https://codeday.me/bug/20191210/2104856.html