簡單的JavaScript OnClick函數

Question

我終於要為我的印刷設計作品集創建一個網站。 我確切地知道我要實現的目標，但是對於Web設計來說還是一個新手，我發現我所擁有的知識有一些局限性。

我已經使用css3轉換（目前它們僅在Chrome和Safari中可用）來制作可在懸停時觸發的翻頁卡-這些功能非常完美，而且正是我想要的。 我現在想要做的就是添加一個JavaScript函數（使用jQuery），該函數可以在點擊時永久翻轉卡片。 我不想讓它禁用純css的懸停功能。

我發現這很難實施。

該站點在這里：

www.samueljamesdesign.com

任何幫助將不勝感激。

Answer 1

只需修改CSS，以便通過添加類來觸發旋轉。 例如，更改此規則：

#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的元素是無效的。 而是將card-container設置為class。

---

為了使單擊時的內容保持翻轉，使用新的CSS，您可以執行以下操作：

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