简单的JavaScript OnClick函数 [英] Simple JavaScript OnClick Function

问题描述

我终于开始为我的印刷设计组合创建一个网站。我知道我想要实现的是什么，但是对网页设计相当新，我发现了一些限制我知道我有....

I'm finally getting round to creating a website for my print design portfolio. I know exactly what I'm trying to achieve but being fairly new to web design I have found some limitations with the knowledge I have....

我使用css3过渡（目前他们只在Chrome和Safari中工作）制作在悬停时触发的翻转卡 - 这些工作完美，正是我在寻找。所有我现在想要做的是添加一个JavaScript函数（使用jQuery）永久翻转卡上的点击。我不希望它禁用悬浮函数，这是纯css虽然。

I have used css3 transitions (currently they only work in Chrome and Safari) to make flip cards which are triggered on hover - these work perfectly and are exactly what I am looking for. All I am now trying to do is add an JavaScript function (using jQuery) that permanently flips the card on click. I don't want it to disable the on hover function which is pure css though.

我发现这是非常难以实现。

I have found this extremely difficult to implement.

网站在这里：

www。 samueljamesdesign.com

任何帮助将非常感激。

推荐答案

只需修改CSS，以便通过添加类也触发旋转。例如，更改此规则：

Just modify your CSS so that the rotation is also triggered by adding a class. For example, change this rule:

#card-container:hover .front {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

到此：

.card-container:hover .front,
.card-container.selected .front,{
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
}

请注意，您不能使用＃card-container ，因为它在文档中具有多个具有相同ID的元素无效。

Note that you cannot use #card-container, as it is invalid to have multiple elements with the same ID in the document. Set card-container as the class instead.

要设置 card-container 使用您的新CSS，您可以：

To make things stay flipeed when clicked, with your new CSS, you do:

var tiles = $('#tiles .card-container');
tiles.click(function() {
    tiles.removeClass('selected');
    $(this).addClass('selected');

    //To change the image in maincontent to match the
    //one in the flipcard clicked on:
    $('#maincontent .img-wrapper').empty().append($(this).find('img').clone());
});

这篇关于简单的JavaScript OnClick函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！