CSS/Javascript multi div flip with class's and id

Question

我对CSS/Javascript有点陌生（对Javascript真的不太了解）。我试图在同一页上翻转多个div，使用我在其他地方找到的代码（jsfiddle）并根据自己的需要进行修改。

现在，我的问题是，如果我点击一个div来翻转它，页面上的其他div也会翻转。我浏览了这个网站，知道我不能使用class，我必须使用id。我试过这样做，但似乎根本无法让它发挥作用。我想知道我的Javascript是否需要调整？

我的示例代码在这里。理想情况下，我希望尽可能多地保留这个Javascript，因为正在翻转的div两侧的内容大小不同，而这个Javascript解决了这个小问题。

任何关于如何在每个div中放置id以确保它们能够单独翻转的建议/提示/想法都将不胜感激。

干杯！

Answer 1

如果要翻转多张牌，需要进行一些更改。在这个Fiddle中有您的代码的变体。

我稍微简化了HTML。关键是：

1） 给方框一个"flip-it"类，而不是一个ID，因为一页上应该只有一个ID"flip-it"。那么要调用的代码是：

$('div.flip-it').hover(flipThis);

2） 然后在flipThis中，您需要确定要翻转的卡片。你的旧代码把它们都翻了。相关变化为：

function flipThis() {
    var $this = $(this);
    var card = $this.find('.flipcard');
    var front =  $this.find('.flipcard-front');
    var back =  $this.find('.flipcard-back');

Answer 2

您实际上可以使用类。现在，当您将鼠标悬停在id为"flip-it"的div上时，就会调用javascript函数flipThis。但是您给了每个div相同的ID，因此所有div都翻转了。此外，HTML代码也有错误（缺少一些结束div标记</div>）。

在这里，我修复了这些HTML错误，并将功能改回使用类：http://jsfiddle.net/thijs_s/q276yL4k/3/

关键是在flipThis-函数中使用this。由于函数是在事件上调用的，因此this将包含悬停在其上的元素。然后您可以只选择这个元素（所以不是所有具有特定类的元素）：

var card = $(this).find('.flipcard');
var front = $(this).find('.flipcard-front');
var back = $(this).find('.flipcard-back');

最后，使元素浮动，然后改变高度，会在翻转卡的定位方面产生问题。如果第二个插页的高度发生变化，则第三个插页将出现在第一个插页右侧。为了克服这个问题，您需要在两者之间放置一个元素来"清除"浮点值。我使用了带有"clearer"类的div。这个类的CSS很简单：

.clearer {
    clear: both;
}