Question

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

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

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

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

干杯！

Answer 1

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

我简化了HTML。关键是：

1）让盒子翻转一组＆＃34;翻转它＆＃34;而不是ID，因为只有一个ID＆＃34;翻转它＆＃34;在页面上。然后要调用的代码是：

$('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-function flipThis。但是你给了每个div相同的ID，因此它们都被翻转了。此外，HTML代码有问题（缺少一些结束div标签</div>）。

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

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

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

最后，让元素浮动然后改变高度会给翻转卡的定位带来问题。如果第二张卡片的高度发生变化，第三张卡片将出现在第一张卡片的右侧。要克服这个问题，你需要在它之间放一个“清除”浮点数的元素。我使用了一个“清晰”类的div。这个类的CSS很简单：

.clearer {
    clear: both;
}

CSS / Javascript多个div翻转类和ID

2 个答案: