jquery - 带有 CSS 和 Jquery 的多面翻转卡片
问题描述
如果一页上有一张翻转卡片(多面),我需要一些帮助来创建多个实例。
多亏了Matt Coughlin 的小提琴,我可以完美地创建多面翻转卡片的一个实例
问题是当我想在同一页面上创建第二张和第三张翻转卡时。
在下面的代码片段中,左侧的按钮控制两张翻牌。此外,第一张翻转卡片的内容显示在两侧。
我想我可以为每个实例创建一个函数并完成不同的类,但我希望有一种代码密集度较低的方法。
谢谢
var topCard = 1;
var facingUp = true;
function flipCard(n) {
if (topCard === n) return;
// Replace the contents of the current back-face with the contents
// of the element that should rotate into view.
var curBackFace = $('.' + (facingUp ? 'face2' : 'face1'));
var nextContent = $('.store' + n).html();
var nextContent = $('.store li:nth-child(' + n + ')').html();
curBackFace.html(nextContent);
// Rotate the content
$('.card').toggleClass('flipped');
topCard = n;
facingUp = !facingUp;
}
$('#flip1').on('click', function(){ flipCard(1); });
$('#flip2').on('click', function(){ flipCard(2); });
$('#flip3').on('click', function(){ flipCard(3); });
$('#flip4').on('click', function(){ flipCard(4); });
$(document).ready(function(){
// Add the appropriate content to the initial "front side"
var frontFace = $('.face1');
var frontContent = $('.store li:first-child').html();
frontFace.html(frontContent);
});
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3em;
}
.container {
position: relative;
width: 200px;
height: 260px;
margin: 0 auto 40px auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.container .card {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .card .face {
position: absolute;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
font-size: 140px;
font-weight: bold;
line-height: 260px;
color: #fff;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.container .card.flipped,
.container .card .face2 {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container .card .face .content1 {background-color: #7ad;}
.container .card .face .content2 {background-color: #7da;}
.container .card .face .content3 {background-color: #d7a;}
.container .card .face .content4 {background-color: #fad997;}
.store {
display: none;
}
.buttons {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
<div class="box">
<div class="container">
<div class="card">
<div class="face face1"></div>
<div class="face face2"></div>
</div>
<ul class="store">
<li>
<div class="content content1">1</div>
</li>
<li>
<div class="content content2">2</div>
</li>
<li>
<div class="content content3">3</div>
</li>
<li>
<div class="content content4">4</div>
</li>
</ul>
</div>
<div class="buttons">
<input type="button" id="flip1" value="Flip 1"/>
<input type="button" id="flip2" value="Flip 2"/>
<input type="button" id="flip3" value="Flip 3"/>
<input type="button" id="flip4" value="Flip 4"/>
</div>
</div>
<div class="box">
<div class="container">
<div class="card">
<div class="face face1"></div>
<div class="face face2"></div>
</div>
<ul class="store">
<li>
<div class="content content1">11</div>
</li>
<li>
<div class="content content2">12</div>
</li>
<li>
<div class="content content3">13</div>
</li>
<li>
<div class="content content4">14</div>
</li>
</ul>
</div>
<div class="buttons">
<input type="button" id="flip11" value="Flip 11"/>
<input type="button" id="flip12" value="Flip 12"/>
<input type="button" id="flip13" value="Flip 13"/>
<input type="button" id="flip14" value="Flip 14"/>
</div>
</div>
</div>
解决方案
我已经稍微改变了你的脚本,但它现在应该可以按照你的意愿工作了。
主要问题是,当您单击按钮时,它不知道要翻转哪张卡片。
演示
function flipCard(n, obj, i) {
var topCard = obj.attr("data-topCard") || 1;
var facingUp = obj.attr("data-facingUp") || true;
if (topCard === n) return;
// Replace the contents of the current back-face with the contents
// of the element that should rotate into view.
var curBackFace = obj.find('.' + (facingUp ? 'face2' : 'face1'));
var nextContent = obj.find('.store li:nth-child(' + (i + 1) + ')').html();
curBackFace.html(nextContent);
// Rotate the content
obj.find('.card').toggleClass('flipped');
obj.attr("data-topCard", n)
obj.attr("data-facingUp", !facingUp)
}
$('.flip').on('click', function() {
flipCard($(this).val(), $(this).closest(".box"), $(this).index());
});
$(document).ready(function() {
// Add the appropriate content to the initial "front side"
$(".box").each(function() {
var frontFace = $(this).find('.face1');
var frontContent = $(this).find('.store li:first-child').html();
frontFace.html(frontContent);
});
});
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 3em;
}
.container {
position: relative;
width: 200px;
height: 260px;
margin: 0 auto 40px auto;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;
}
.container .card {
position: absolute;
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -ms-transform 1s;
-o-transition: -o-transform 1s;
transition: transform 1s;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.container .card .face {
position: absolute;
width: 100%;
height: 100%;
font-family: Arial, sans-serif;
font-size: 140px;
font-weight: bold;
line-height: 260px;
color: #fff;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.container .card.flipped,
.container .card .face2 {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container .card .face .content1 {
background-color: #7ad;
}
.container .card .face .content2 {
background-color: #7da;
}
.container .card .face .content3 {
background-color: #d7a;
}
.container .card .face .content4 {
background-color: #fad997;
}
.store {
display: none;
}
.buttons {
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid">
<div class="box">
<div class="container">
<div class="card">
<div class="face face1"></div>
<div class="face face2"></div>
</div>
<ul class="store">
<li>
<div class="content content1">1</div>
</li>
<li>
<div class="content content2">2</div>
</li>
<li>
<div class="content content3">3</div>
</li>
<li>
<div class="content content4">4</div>
</li>
</ul>
</div>
<div class="buttons">
<input type="button" class="flip" value="1" />
<input type="button" class="flip" value="2" />
<input type="button" class="flip" value="3" />
<input type="button" class="flip" value="4" />
</div>
</div>
<div class="box">
<div class="container">
<div class="card">
<div class="face face1"></div>
<div class="face face2"></div>
</div>
<ul class="store">
<li>
<div class="content content1">11</div>
</li>
<li>
<div class="content content2">12</div>
</li>
<li>
<div class="content content3">13</div>
</li>
<li>
<div class="content content4">14</div>
</li>
</ul>
</div>
<div class="buttons">
<input type="button" class="flip" value="11" />
<input type="button" class="flip" value="12" />
<input type="button" class="flip" value="13" />
<input type="button" class="flip" value="14" />
</div>
</div>
</div>