翻转所有卡片，但想一张一张地翻转

Question

我试图一张一张地翻转这些卡片，但它们正在一起翻转。

我相信我在 javaScript 上遗漏了一些东西。

在原始代码中，我在前面使用图像，在后面使用无序列表，我试图在这里恢复它，只写“Front”和“Back”。

 $(".flip").click(function() { $(".card").toggleClass("flipped"); });

 .card-container { display: flex; }.card { width: 300px; height: 6rem; margin: 30px; transform-style: preserve-3d; transition: transform 1s; }.card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.card figure figcaption { padding: 0 1rem; backface-visibility: hidden; border: 1px solid gray; }.card button.flip { position: absolute; right: 1rem; margin: 0; }.card button.flip { top: 1rem; }.card.back { transform: rotateY( 180deg); }.card.flipped { transform: rotateY( 180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-container"> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 1</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 1</h2> <button class="flip">-</button> </figcaption> </figure> </div> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 2</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 2</h2> <button class="flip">-</button> </figcaption> </figure> </div> </div>

你们知道我做错了什么吗？

Answer 1

除了翻转 class .card的所有元素，您可以使用.closest()方法（向上遍历 DOM 树，直到找到具有指定类的元素）只翻转按钮所在的元素。

$(this).closest(".card").toggleClass("flipped");

 $(".flip").click(function() { $(this).closest(".card").toggleClass("flipped"); });

 .card-container { display: flex; }.card { width: 300px; height: 6rem; margin: 30px; transform-style: preserve-3d; transition: transform 1s; }.card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.card figure figcaption { padding: 0 1rem; backface-visibility: hidden; border: 1px solid gray; }.card button.flip { position: absolute; right: 1rem; margin: 0; }.card button.flip { top: 1rem; }.card.back { transform: rotateY( 180deg); }.card.flipped { transform: rotateY( 180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-container"> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 1</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 1</h2> <button class="flip">-</button> </figcaption> </figure> </div> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 2</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 2</h2> <button class="flip">-</button> </figcaption> </figure> </div> </div>

Answer 2

 $(".flip").click(function() { $(this).closest(".card").toggleClass("flipped"); });

 .card-container { display: flex; }.card { width: 300px; height: 6rem; margin: 30px; transform-style: preserve-3d; transition: transform 1s; }.card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.card figure figcaption { padding: 0 1rem; backface-visibility: hidden; border: 1px solid gray; }.card button.flip { position: absolute; right: 1rem; margin: 0; }.card button.flip { top: 1rem; }.card.back { transform: rotateY( 180deg); }.card.flipped { transform: rotateY( 180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-container"> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 1</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 1</h2> <button class="flip">-</button> </figcaption> </figure> </div> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 2</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 2</h2> <button class="flip">-</button> </figcaption> </figure> </div> </div>

Answer 3

您使用了.card class，而不是通过它们的ID一一识别卡片。 因此，当您尝试翻转时，您最终会翻转所有卡片。 您需要通过 id 唯一标识您的卡片，以便您可以识别要翻转的特定卡片。

Answer 4

 const cardElement = document.querySelectorAll('.card'); for(let i = 0; i < cardElement.length; i++) { cardElement[i].addEventListener('click',function(){ this.classList.add('flipped') }) }

 .card-container { display: flex; }.card { width: 300px; height: 6rem; margin: 30px; transform-style: preserve-3d; transition: transform 1s; }.card figure { margin: 0; display: block; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; }.card figure figcaption { padding: 0 1rem; backface-visibility: hidden; border: 1px solid gray; }.card button.flip { position: absolute; right: 1rem; margin: 0; }.card button.flip { top: 1rem; }.card.back { transform: rotateY( 180deg); }.card.flipped { transform: rotateY( 180deg); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card-container"> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 1</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 1</h2> <button class="flip">-</button> </figcaption> </figure> </div> <div class="card"> <figure class="front"> <figcaption> <h2>FRONT 2</h2> <button class="flip">+</button> </figcaption> </figure> <figure class="back"> <figcaption> <h2>BACK 2</h2> <button class="flip">-</button> </figcaption> </figure> </div> </div>

也许你应该首先得到所有有卡class 的元素，然后循环它，像这样。 顺便说一句，我使用的是 javascript 而不是 jQuery。

const cardElement = document.querySelectorAll('.card');

然后使用循环保存元素的所有变量。

for(let i = 0; i < cardElement.length; i++) {
  cardElement[i].addEventListener('click',function(){
    this.classList.add('flipped')
  })
}

您可以尝试如何切换翻转的 class。

Answer 5

除了评论中的其他问题（学习 jQuery 和/或 React）...我开始在评论中回答您并很快用完了空间，所以我决定将很长的评论变成另一个答案。

使用 jQuery 有两个原因，现在都已过时。

首先是浏览器兼容性，主要是关于 IE。 一般来说，我们必须为两个浏览器编写代码：IE和它们的所有rest（作为一个组）。 IE 就不同了——它必须单独处理。 但既然微软最终扼杀了被称为 IE 的灾难，第一个原因就不再需要了。

旁白：为什么 IE 如此不同？ 这并不是因为微软的程序员很糟糕……而是因为微软（一家商业的、以营利为目的的公司）正在进入一个软件产品免费赠送的环境（互联网）。 不仅是浏览器（Firefox、Netscape Navigator），更重要的是：服务器。 微软如何与 Linux 等免费服务器和 PHP、Perl 等后端语言竞争？ 他们的解决方案？ 创建一个包含在每台计算机上的新浏览器（Windows 占据了个人计算机市场的 95%），并且只与 Microsoft 网络服务器（Internet 信息服务器，或 IIS）配合良好。 对于所有其他网络服务器，网站在 IE 上的显示并不完全正确......程序员必须找出黑客并做后空翻 - 但使用 MS IIS 作为网络服务器，一切正常。 因此，如果您是一家银行或大型跨国公司，希望在新的 WorldWideWeb 上建立业务，您是否会冒险让您的网站在地球上最常用的浏览器上看起来像垃圾？ 不，您将购买 MS IIS 并将其放在 Windows 服务器上，由 Microsoft 认证的技术人员提供服务。 嘉庆、嘉庆和嘉庆。

第二个是简化 javascript。 jQuery 具有像$.each()和$.ajax()和.on()这样的例程，它们比纯 javascript 更容易且更少复杂。 然而，所谓的“现代 javascript”（es6 等）逐渐添加了新的功能和方法来弥补这一缺陷，并将 jQuery 抛在了后面。 今天，学习javascript，jQuery还是很高兴知道的，但随着你的学习。 学习 JavaScript。

jQuery 仍然值得了解，因为它仍然在大约 70% 的网站上使用，并且是许多其他库（如 Bootstrap 3 和 4）的核心组件。但首先，应该知道如何在原生 javascript 中执行操作。 这里有几篇文章展示了如何在新的 javascript 模式中执行 jQuery 事情。

select 纯JS中的元素的更快方法

jQuery remove() 等效于纯 JS

---

最后，关于学习 React。

这取决于你的最终目标是什么。 如果你的目标是就业，那么是的，React / Angular / Vue.js 很高兴知道。 但是，如果您主要对让网页做出惊人的事情感兴趣，那么：javascript 很重要，图形库（D3.js、Dash-Plotly 等）很重要，Python 语言在科学和数学/图形环境中使用得非常多, 和 PHP 是一个非常强大的后端，具有大量预先编写的代码。 （永远不要忘记 Facebook 最近才开始从 PHP 和 MySQL 迁移到他们自己的内部系统（React） ）。

这是另一个答案，它添加了一些有关学习 React 的重要信息：

使用 React 编码的站点，在 GitHub 页面上显示空白页面