HTML | CSS | JS – Flip Cards可以在1上使用，但不能在4上使用

Question

我的目标是在一个网格中具有4个具有相同效果的盒子。 2在顶部2在底部。 使用1可以正常工作，而当我尝试放置其他3则不起作用。 这是jsfiddle

function changeClass() {
    if(document.getElementById("block").className == "block")
        document.getElementById("block").className += " rotated";
    else
        document.getElementById("block").className = "block";
}

这是工作效果的一个例子。

Answer 1

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

对于您的情况，您需要将卡片包装到相对位置的元素中。 另外，您在脚本中有错误，但是这里是示例Fiddle

基本上，您可以使用包装器：

    <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>

比JS：

function changeClass(el) {
    if (el.className == "block") el.className += "rotated";
    else el.className = "block";
};

Answer 2

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

<body>
    <div id="container">
        <div class="db">
            <div id="block" class="block" onclick="changeClass()">
                <div class="front side">
                    <h2>Box 1</h2>
                </div>
                <div class="back side">
                    <p>Box 1 Back Text</p>
                </div>
            </div>
            <div id="block1" class="block" onclick="changeClass()">
                <div class="front side">
                    <h2>Box 1</h2>
                </div>
                <div class="back side">
                    <p>Box 1 Back Text</p>
                </div>
            </div>
            <div id="block2" class="block" onclick="changeClass()">
                <div class="front side">
                    <h2>Box 1</h2>
                </div>
                <div class="back side">
                    <p>Box 1 Back Text</p>
                </div>
            </div>
        </div>
    </div>
</body>

然后将需要修改您的JS代码，以识别单击了哪个元素。

function changeClass(element) {
    if(element.className == "block")
        element.className += " rotated";
    else
        element.className = "block";
}

在你的HTML onClick事件，你会通过this像这样

onclick="changeClass(this)"

如您所见，该过程将针对每个元素而单独进行。

更新小提琴

注意：在我的示例中，不需要ID，但我想强调页面上唯一ID的重要性。

HTML | CSS | JS – Flip Cards可以在1上使用，但不能在4上使用

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-11-11 23:03:45

解决方案2
1 2014-11-11 23:10:42

HTML | CSS | JS – Flip Cards可以在1上使用，但不能在4上使用

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-11-11 23:03:45

解决方案2 1 2014-11-11 23:10:42

解决方案1
1 已采纳 2014-11-11 23:03:45

解决方案2
1 2014-11-11 23:10:42