[英]How to make click event work for multiple classes of the same name
I'm trying to implement a flip effect on multiple tiles every time a user clicks on it, its sort of the beginning of a dashboard type webpage. 每次用户点击它时,我都会尝试在多个磁贴上实现翻转效果,这是仪表板类型网页的开头。 How do I make a click event work for multiple classes of the same name?
如何使单击事件适用于多个同名的类?
All of the tiles have the same class name but under different "box" divs, the jquery click event only seems to implement in the last tile added, while the other ones are kept static. 所有的tile都具有相同的类名,但在不同的“box”div下,jquery click事件似乎只在最后添加的tile中实现,而其他tile保持静态。 I can't seem to figure whats causing this and I've been searching all over for an answer.
我似乎无法想象这导致了什么,我一直在寻找答案。 This is the last revision of the click event code:
这是点击事件代码的最后一次修订:
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]);
}
I can't seem to figure out where the root of the problem is. 我似乎无法弄清楚问题的根源在哪里。
Note: here is the basic snippet that you need to do. 注意:这是您需要执行的基本代码段。 by clicking all class listed call function to call show the effects.
通过单击所有类列出的调用函数来调用显示效果。 if you don't want to show effects then don't add class.
如果你不想显示效果,那么不要添加类。
function callMe(){ if ($(this).hasClass('flip')){ $(this).removeClass('flip');//removes flip class } else { $(this).addClass('flip');//add flip class } } $(".class1, .class2").click(callMe); //add classes here needs to give effects and call functions
.flip{ color:red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="class1">Class 1</div> <span class="class2">Class 2</span>
Consider this Codepen for a pure javascript solution. 考虑这个Codepen的纯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");
})
}
Or consider this for a jQuery solution . 或者考虑将其用于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: 编辑:
After looking at your given code I just realized that you position absolute divs via very large paddings which is not the correct way to do. 看完你给定的代码之后我才意识到你通过非常大的填充来定位绝对div,这不是正确的方法。 Rather use
top|right|bottom|left
for positioning ( see here for docs ). 而是使用
top|right|bottom|left
进行定位( 请参阅此处了解文档 )。 After changing the css your example works fully even with the messy javascript. 更改css之后,即使使用凌乱的javascript,您的示例也能完全正常工作。 Look here
看这里
I think that replacing the snippet you provided with this code should do it for you: 我认为替换此代码提供的代码段应该为您完成:
$(document).ready(function() {
$(".tile").click(function() {
$(".tile").toggleClass("flip");
});
});
Depending on where the code actually lives in your project, you might not need the $(document).ready()
event listener that wraps the "on click" event listener. 根据代码实际存在于项目中的位置,您可能不需要包含“on click”事件侦听器的
$(document).ready()
事件侦听器。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.