翻轉所有卡片，但想一張一張地翻轉

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 頁面上顯示空白頁面