0

我想做的是在屏幕上显示很多卡片。当您单击它们时，它们应该旋转并改变它们的颜色。我遇到的问题是，无论我点击哪张卡片，只有第一张卡片会发生变化，而不是被点击的卡片。

这是一个小提琴：

http://jsfiddle.net/GZ8zr/2/

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);
    }

谢谢

4

4 回答 4

3

您的问题是您在三个输入和标签上使用相同的 ID。根据 W3C 规范，ID 在页面上必须是唯一的。这就是该for属性所期望的。所以改变你的代码看起来像这样：http: //jsfiddle.net/GYatesIII/GZ8zr/4/

于 2013-08-15T17:45:27.000 回答
1

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

删除复选框的这个小提琴分支display:none演示了单击任何标签会导致第一个复选框被切换。

另一方面，这个 fiddle演示了当 id 是唯一的时您的代码可以正常工作。

另请注意，HTML 标准规定 id 必须是唯一的：

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

于 2013-08-15T17:46:20.250 回答
0

问题是您的输入和标签都只针对第一个输入标签 - 这是不正确的。这是一个工作演示：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>
于 2013-08-15T17:48:17.587 回答
-2

所有卡片都必须具有唯一标识符。您正在单击一张卡片，CSS 正在应用该类的第一件事上运行（在本例中为第一张卡片）。我会使用 jquery 来选择你希望类应用到的特定卡-> $(this)。希望有帮助。

于 2013-08-15T17:47:21.113 回答