Question

我要做的是在屏幕上显示很多卡片。单击它们时，它们应旋转并更改其颜色。我遇到的问题是，无论我点击哪张卡，只有第一张卡更改，而不是点击的卡。

这是一个小提琴：

HTML：

<body>

    <div class="pane">
    <input type="checkbox" id="button">
    <label class="card" for="button"></label>

    <input type="checkbox" id="button">
    <label class="card" for="button"></label>

    <input type="checkbox" id="button">
    <label class="card" for="button"></label>

    <input type="checkbox" id="button">
    <label class="card" for="button"></label>
    </div>

</body>

的CSS：

input
    {
    width:100px;
    height:100px;
    display:none
    }
.card
    {
    width:100px;
    height:100px;
    background:red;
    display:block;
    transition: background 1s, -webkit-transform 1s;
    }
input:checked +.card
    {
    background:blue;
    -webkit-transform: rotateX(180deg);
    }

感谢

Answer 1

您的问题是您在三个输入和标签上使用相同的ID。根据W3C规范，ID必须在页面上是唯一的。这就是for属性所期望的。因此，将代码更改为如下所示： http://jsfiddle.net/GYatesIII/GZ8zr/4/

Answer 2

您有三次相同的ID“按钮”。因此 - 至少在我的浏览器上，也可能是你的浏览器 - 每个标签都是for第一个复选框。 AFAIK这种行为也是未定义的，因为标准需要任何给定页面的唯一ID（见下文）。

删除display:none复选框的

This fork of your fiddle表示点击任何标签都会导致 first 复选框切换。

另一方面，

This fiddle演示了当ID唯一时代码正常工作。

另请注意the HTML standard specifies that ids must be unique：

id = name [CS] ：此属性为元素指定名称。该名称在文档中必须是唯一的。

Answer 3

问题是您的输入和标签都只针对第一个输入标记 - 这是不正确的。这是一个有效的演示：http://jsfiddle.net/GZ8zr/6/

如果您的输入具有ID“按钮”，则其他任何输入都不能具有该ID。即使你这样做，也会检查第一个输入复选框 - html本身强制每个html页面只有一个唯一的ID。

HTML：

<div class="pane">
<input type="checkbox" id="button1">
<label class="card" for="button1"></label>

<input type="checkbox" id="button2">
<label class="card" for="button2"></label>

<input type="checkbox" id="button3">
<label class="card" for="button3"></label>

<input type="checkbox" id="button4">
<label class="card" for="button4"></label>
</div>
    </body>

Answer 4

所有卡片必须具有唯一标识符。您正在点击一张卡片，并且CSS正在运行该类应用的第一件事（在这种情况下是第一张卡片）。我会使用jquery来选择你想要类适用的特定卡片 - ＆gt; $（本）。希望有所帮助。

如何使用CSS旋转不同的卡？

4 个答案: