Javascript HTML | CSS | JS–；Flip Cards让它与1一起工作，但它赢了&x2019；I don’我不能和4个人一起工作

我的目标是在网格中有4个具有相同效果的长方体。2在顶部2在底部。对于1，它工作正常，当我尝试放置其他3时，它不工作。这是

函数changeClass（）{
if（document.getElementById（“块”）.className==“块”）
document.getElementById（“块”）.className+=“旋转”；
其他的
document.getElementById（“块”）.className=“块”；
}

---

.

页面上不能有多个id相同的元素。可以为脚本使用多个ID或同一个类

对于您的情况，您需要将卡片包装到具有相对位置的元素中。脚本中也有错误，但下面是一个工作示例

基本上，使用包装器：

    <div class="card">
        <div class="block" onclick="changeClass(this);">
            <div class="front side">
                    <h2>Box 1</h2>

            </div>
            <div class="back side">
                <p>Box 1 Back Text</p>
            </div>
        </div>
    </div>

---

您的HTML将需要3个独特的HTML ID元素，如下所示：

方框1
框1返回文本

方框1
框1返回文本

方框1
框1返回文本

然后需要修改JS代码，以确定单击了哪个elemet。。像这样的

函数变更类（元素）{
if（element.className==“block”）
element.className+=“已旋转”；
其他的
element.className=“块”；
}

在HTML onClick事件中，您将像这样传入

这个

onclick=“changeClass（this）”

正如您所看到的，该过程对于每个元素都是独立的


注意：在我的示例中，不需要ID，但我想强调页面上唯一ID的重要性。
您应该拥有唯一ID…感谢skobaljic，这完全解决了问题。
function changeClass(el) {
    if (el.className == "block") el.className += "rotated";
    else el.className = "block";
};