我试图在用户每次单击时在多个图块上实现翻转效果，这是仪表板类型网页的开头。如何使点击事件适用于同名的多个类？
所有磁贴都具有相同的类名，但在不同的“ box” div下，jquery 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]);
}
这是CSS代码：
.box1 {
padding-top:250px;
padding-left:30px;
position:absolute;
perspective: 1000px;
width: 300px;
height:150px;
background:none;
}
.box2 {
padding-top:250px;
padding-left:355px;
position:absolute;
perspective: 1000px;
width: 300px;
height:150px;
background:none;
}
.box3 {
padding-top:250px;
padding-left:680px;
position:absolute;
perspective: 1000px;
width: 300px;
height:150px;
background:none;
}
.box4 {
padding-top:250px;
padding-left:1005px;
position:absolute;
perspective: 1000px;
width: 300px;
height:150px;
background:none;
}
.tile {
position: relative;
width: 100%;
height:100%;
transform-style: preserve-3d;
transition: all 0.5s ease;
background: yellow;
border-radius: 10px;
}
.tile-front {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: yellow;
color: grey;
border-radius: 10px;
}
.bg-tile {
padding-top:5px;
text-align: center;
font-family: Times;
font-size: 20px;
}
.card-body {
text-align: center;
font-family: Times;
font-size: 25px;
}
.card-footer{
padding-top:10px;
text-align: center;
}
.tile.flip{
transform: rotateY(180deg);
}
.tile-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
background: blue;
color: grey;
border-radius: 10px;
text-align: center;
transform: rotateY(180deg);
}
这是html代码：
<!DOCTYPE html>
<html>
<head>
<title>Dashboard</title>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="box1">
<div class="tile">
<div class="card tile-front">
<div class="bg-tile">
<i class="material-icons m_emote">account_box</i>
</div>
<div class="card-body">
<p>5 Users</p>
</div>
<div class="card-footer text-muted m_desc">
Online
</div>
</div>
<div class="card tile-back">
<div class="card-body">
<p>User online correspond to people connected on your network</p>
</div>
</div>
</div>
</div>
<div class="box2">
<div class="tile">
<div class="card tile-front">
<div class="bg-tile">
<i class="material-icons m_emote">account_box</i>
</div>
<div class="card-body">
<p>5 Users</p>
</div>
<div class="card-footer text-muted m_desc">
Online
</div>
</div>
<div class="card tile-back">
<div class="card-body">
<p>User online correspond to people connected on your network</p>
</div>
</div>
</div>
</div>
<div class="box3">
<div class="tile">
<div class="card tile-front">
<div class="bg-tile">
<i class="material-icons m_emote">account_box</i>
</div>
<div class="card-body">
<p>5 Users</p>
</div>
<div class="card-footer text-muted m_desc">
Online
</div>
</div>
<div class="card tile-back">
<div class="card-body">
<p>User online correspond to people connected on your network</p>
</div>
</div>
</div>
</div>
<div class="box4">
<div class="tile">
<div class="card tile-front">
<div class="bg-tile">
<i class="material-icons m_emote">account_box</i>
</div>
<div class="card-body">
<p>5 Users</p>
</div>
<div class="card-footer text-muted m_desc">
Online
</div>
</div>
<div class="card tile-back">
<div class="card-body">
<p>User online correspond to people connected on your network</p>
</div>
</div>
</div>
</div>
<script src="dashboard.js"> </script>
</body>
</html>
我似乎无法弄清楚问题的根源在哪里。
答案 0 :(得分：1)
注意：这是您需要执行的基本代码段。通过单击列出的所有类的调用函数来调用显示效果。如果您不想显示效果，请不要添加类。
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>
答案 1 :(得分：1)
考虑使用this 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");
})
}
或者考虑使用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，这不是正确的方法。宁可使用top|right|bottom|left来定位（see here for docs）。更改CSS之后，即使使用凌乱的javascript，您的示例也可以完全正常运行。 Look here
答案 2 :(得分：0)
我认为，用此代码替换您提供的代码段应该为您做到：
$(document).ready(function() {
$(".tile").click(function() {
$(".tile").toggleClass("flip");
});
});
根据代码实际在项目中的位置，您可能不需要$(document).ready()事件监听器，该事件监听器包装了“单击时”事件监听器。