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

Question

My objective is to have 4 boxes with the same effect in a grid. 我的目标是在一个网格中具有4个具有相同效果的盒子。 2 at the top 2 at the bottom. 2在顶部2在底部。 With 1 it works fine, when I try to put the other 3 it doesn't work. 使用1可以正常工作，而当我尝试放置其他3则不起作用。 Here is jsfiddle 这是jsfiddle

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

Here is an example of the working effect . 这是工作效果的一个例子。

Answer 1

You cannot have more than one element with same id on page. 页面上不能有多个具有相同id元素。 You can use several IDs or same class for your script. 您可以为脚本使用多个ID或相同的类。

For your case, you need to wrap cards into element with position relative. 对于您的情况，您需要将卡片包装到相对位置的元素中。 Also you have errors in script, but here is working example Fiddle 另外，您在脚本中有错误，但是这里是示例Fiddle

Basically, you go with wrapper: 基本上，您可以使用包装器：

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

Than JS: 比JS：

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

Answer 2

Your HTML will need 3 unuique HTML ID elements like so: 您的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>

Then your JS code will need to be modified to identify which elemet has been clicked.. Something like this 然后将需要修改您的JS代码，以识别单击了哪个元素。

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

In your HTML onClick event you will pass in this like so 在你的HTML onClick事件，你会通过this像这样

onclick="changeClass(this)"

As you can see the process will be individual to each element. 如您所见，该过程将针对每个元素而单独进行。

Updated Fiddle 更新小提琴

NOTE : In my example the ID's are not required but i wanted to stress the importance of unique ID's on pages. 注意：在我的示例中，不需要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