Javascript 如何在相互交互（一个翻转打开，另一个翻转关闭）的情况下，在单击时翻转div？

我是web开发的新手，我用掌握JavaScript来挑战自己。我的任务是使页面上的不同div在单击时可翻转，并根据当前状态相互交互

我想再学习两件事：

缩短/简化当前JS代码（如果可能）

让div彼此交互：当“单击”时，当前div打开，但如果其他div已经打开，它将关闭。所以一次只有一个部门是开放的

我的当前代码（代码笔：）：

HTML

var-card=document.querySelector（'.card'）；
card.addEventListener（'click'，function（）{
card.classList.toggle（'is-fliped'）；
});
var card2=document.querySelector（'.card2'）；
card2.addEventListener（'click'，函数（）{
card2.classList.toggle（'is-fliped'）；
});
var card3=document.querySelector（'.card3'）；
card3.addEventListener（'click'，函数（）{
card3.classList.toggle（'is-fliped'）；
});
@媒体屏幕和（最小宽度：650px）{
.翻转{显示：flex；
证明内容：之间的空间；
}
}
.scene、.scene2、.scene3{
宽度：200px；
高度：200px；
透视图：1200像素；
左边距：自动；
右边距：自动；
}
.card、.card2、.card3{
宽度：200px；
高度：200px；
位置：相对位置；
转型：转型1.5s；
变换样式：保留-3d；
}
.card___面、.card__面2、.card__面3{
位置：绝对位置；
宽度：200px；
高度：200px；
背面可见性：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
}
.card_uuuface--front、.card_uuface--front 2、.card_uuuface--front 3{
背景：红色；
}
.card_uuuuface--back、.card_uuuuface--back2、.card_uuuuuface--back3{
背景：蓝色；
变换：旋转（180度）；
}
.card.is-fliped、.card2.is-fliped、.card3.is-fliped{
变换：旋转（180度）；
}

文件
第一节前面
第一节背


第二组前面
二等舱后


最后一节前面
倒数
您可以通过在所有卡上使用公共
卡
类来简化代码。然后，在翻转单击的卡之前，您需要从所有卡中删除
is fliped
类：

var cards = document.querySelectorAll('.card');

cards.forEach(function (card) {
  card.addEventListener('click', function () {
     // Remove the class on all, toggle the clicked one
     cards.forEach(function (c) {
       if (c !== card) c.classList.remove('is-flipped');
       else c.classList.toggle('is-flipped');
     });
  });
});


堆栈代码段：


var cards=document.querySelectorAll（'.card'）；
卡片。forEach（功能（卡片）{
card.addEventListener（'click'，函数（）{
//删除除单击的类之外的所有类
卡片。forEach（功能（c）{
如果（c！==卡片）c.classList.remove（'is-fliped'）；
else c.classList.toggle（'is-fliped'）；
});
});
});
@媒体屏幕和（最小宽度：400px）{
.翻转{显示：flex；
证明内容：之间的空间；
}
}
.scene、.scene2、.scene3{
宽度：100px；
高度：100px；
透视图：1200像素；
左边距：自动；
右边距：自动；
}
.卡片{
宽度：100px；
高度：100px；
位置：相对位置；
转型：转型1.5s；
变换样式：保留-3d；
}
.card___面、.card__面2、.card__面3{
位置：绝对位置；
宽度：100px；
高度：100px；
背面可见性：隐藏；
显示器：flex；
对齐项目：居中；
证明内容：中心；
颜色：#fff；
}
.card_uuuface--front、.card_uuface--front 2、.card_uuuface--front 3{
背景：红色；
}
.card_uuuuface--back、.card_uuuuface--back2、.card_uuuuuface--back3{
背景：蓝色；
变换：旋转（180度）；
}
.card.is-fliped、.card2.is-fliped、.card3.is-fliped{
变换：旋转（180度）；
}

文件
第一节前面
第一节背


第二组前面
二等舱后


最后一节前面
倒数