jquery - 翻转卡效果失败

Question

我想使用以下代码来使用“卡片翻转”类型的效果:

CSS

.flip {
    -webkit-perspective:800;
    width:278px;
    height:400px;
    position:relative; }

.flip .card.flipped { -webkit-transform:rotatey(-180deg); }

.flip .card {
    width:100%;
    height:100%;
    -webkit-transform-style:preserve-3d;
    -webkit-transition:0.5s; }

.flip .card .face {
    width:100%;
    height:100%;
    position:absolute;
    -webkit-backface-visibility:hidden ;
    z-index:2;
    text-align:center; }

.flip .card .front {
    position:absolute;
    z-index:1;
    text-align:center;
    cursor:pointer; }

.flip .card .back {
   -webkit-transform: rotatey(-180deg);
    text-align:center;
    cursor: pointer; }

J查询脚本

$(document).ready(function() {
    $('.flip').click(function() {
        $(this).find('.card').toggleClass('flipped');
    });
});

HTML

<div class="flip"> 
    <div class="card"> 
        <div class="face front"><a href="images/img1.jpg" data-lightbox="data" data-title="title"><img src="images/img1.jpg" alt="title" /></a></div> 
        <div class="face back">Back content</div>
    </div>
</div>

我面临两个不同的问题。这行得通，但并不像我希望的那样工作...让我解释一下。

1. 无论我在“card”div 中单击什么地方，它都会翻转“card”。我怎样才能让它从另一个 div 翻转卡片？例如，从一张写着“更多信息”的图片，然后点击那里，它会翻转卡片。

2. 如果我点击前面“卡片”中包含的图像，我无法使用灯箱效果显示更大的图像，因为它会直接翻转卡片并且不让我做任何其他事情...

非常感谢你们的帮助。

非常感谢。

Answer 1

通过使用选择器，我为三张卡片实现了相同的功能。

在此，我使用 flip_card 作为所有按钮的类名，这些按钮具有其唯一 ID flip_card_# 类似于 flip_card_1 flip_card_2 flip_card_3 等

这些按钮将用于查找类 flip# 类似 flip1 flip2 flip3 然后切换card

类元素的 flipped 类

JQuery

$(document).ready(function () {
    $('.flip_card').click(function () {
        var x = $(this).attr("id");
        var i = x.substring(10);
        $('.flip' + i + '').find('.card').toggleClass('flipped');
    });
});

Note: For this code to work, you have to use the numbers accordingly ex. button with an id flip_card_1 is used to flip the card which is inside an element with a class flip1

请检查修改后的Fiddle