我试图在用户每次单击时在多个图块上实现翻转效果,这是仪表板类型网页的开头.如何使点击事件适用于同名的多个类？
所有磁贴都具有相同的类名,但是在不同的“ 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]);
}
我似乎无法弄清楚问题的根源在哪里.
最佳答案
考虑使用@L_403_1@作为纯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");
})
}
或考虑this for a jQuery solution.
<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');
});
编辑：
在查看了给定的代码之后,我才意识到您通过非常大的填充物来定位绝对div,这不是正确的方法.而是使用顶部|底部|底部进行定位(see here for docs).更改CSS之后,即使使用凌乱的javascript,您的示例也可以正常使用. Look here