翻牌效果失败

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

JQUERY 脚本

$(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>

我面临 2 个不同的问题。这行得通，但不像我想要的那样工作......让我解释一下。

1. 无论我在“卡片”div 中单击什么位置，它都会翻转“卡片”。我怎样才能让它翻转卡片而不是另一个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');
    });
});

注意：要使此代码起作用，您必须相应地使用数字 前任。 id为flip_card_1的按钮用于翻转卡片 在具有 flip1 类的元素内

请查看修改后的Fiddle

Answer 2

你的第一个问题的答案是你必须改变你的 jquery

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

我没有使用$('.flip')和$(this)，而是提到了按钮的id和代码必须在其中找到名为“card”的类的类。

上面的代码说 - 当一个 id 为 'flip_card' 的元素是 单击后，转到类名为 flip 的元素，找到类名为 card 的元素，然后为该元素切换类 flipped。

你可以直接使用$('.card').toggleClass('flipped');之类的东西

代码完全取决于你将如何使用它

查看Fiddle