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 SCRIPT

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

我面临着两个不同的问题。这有效，但不能按照我的意愿行事......让我解释一下。

无论我在“卡片”div中单击，它都会翻转“卡片”。我如何让它翻转卡但是从另一个div？例如，从显示“更多信息”的图像中，然后点击那里，它会翻转卡片。
如果我点击前面“卡片”中包含的图片，我就无法使用灯箱效果来显示更大的图像，因为它会直接翻转卡片并且不让我做任何其他事情......

我真的很感谢你的帮助。

非常感谢。

Answer 1

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

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

我没有使用$('.flip')和$(this)，而是提到了按钮的ID以及代码必须找到名为＆＃39; card＆＃39;的类的类。

上面的代码说明了 - 当一个元素带有id＆＃39; flip_card＆＃39;是单击，转到具有名为flip的类的元素，找到具有名为card的类的元素，然后为该元素切换类flipped。

您可以直接使用$('.card').toggleClass('flipped');

之类的内容

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

选中此Fiddle

Answer 2

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

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

这些按钮将用于查找flip# flip1 flip2之类的类flip3，然后使用类{切换元素的类flipped {1}}

JQuery的

card

注意：要使此代码生效，您必须相应地使用这些代码恩。身份$(document).ready(function () { $('.flip_card').click(function () { var x = $(this).attr("id"); var i = x.substring(10); $('.flip' + i + '').find('.card').toggleClass('flipped'); }); });的按钮用于翻转卡片在具有类flip_card_1
的元素中

请检查修改后的Fiddle

翻转卡效果失败

2 个答案: