如何區分在DOM函數中使用的相同div？

Question

我的前端有一組“卡片”，分別帶有正面和背面，這些卡片是通過forEach腳本創建的，這意味着每次都有可能不同的數量，看起來像這樣。

<div class="card-container" onclick="flip()">
                    <div class="card">   
                        <div class="front">
                                <p> front of card </p>
                        </div>
                        <div class="back">
                                <p> back of card</p>
                        </div>
                    </div>
            </div>

您可能已經注意到，有一個flip（）函數，當第二次單擊時，它會顯示卡的背面並隱藏正面，反之亦然。 我希望此功能僅適用於當前卡，即用戶單擊的卡，當我單擊該卡時，它將翻轉所有卡。

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

我的第一個解決方案是嘗試增加類名（card1，card2等）並為每個不同的類名復制函數，但是以下示例語法給我一個錯誤，即找不到文檔對象，該錯誤可能與我正在使用ejs的事實。

var card = document.createElement('div');
card.classList.add('card');

我希望jQuery中有一個解決方案，允許您指定該函數僅在1 div或所選div的子級上執行，因為這是我認為最簡潔的解決方案。

否則，我認為我需要找到一種通過ejs增加div名稱的方法。

Answer 1

您可以使用jquery click事件處理程序來實現。 從單擊的div中查找卡片，而不是翻轉所有卡片。

從HTML移除onclick函數

<div class="card-container">
                    <div class="card">   
                        <div class="front">
                                <p> front of card </p>
                        </div>
                        <div class="back">
                                <p> back of card</p>
                        </div>
                    </div>
            </div>

在jquery下面使用

$(function(){
  $('.card-container').on("click", function(){
     $(this).find('.card').toggleClass("flipped");
  });
});

Answer 2

如果卡在加載時存在，請執行此操作

$('.card-container').on("click",function() { $(this).find(".card").toggleClass('flipped'); }); 

要么

$('.card').on("click",function() { $(this).toggleClass('flipped'); });

如果不是，那么您需要委托：

$(document).on("click",".card", function() { $(this).toggleClass('flipped'); }); 

$(document)可以更改為任何靜態父容器

Answer 3

如果你通過this從你在onclick功能，這是比較容易的翻頁功能的使用方法：

 function flip(element) { $(element).toggleClass('flipped'); } 

 .card-container { background-color: rgba(255, 245, 250, 0.9); border-top: solid 10px rgb(50, 200, 100); box-shadow: 0px 2px 1px 1px rgba(10, 10, 10, 0.3); padding: 10px; margin-bottom: 20px; position: relative; top: 0; transition: all 0.3s ease; } .flipped { box-shadow: 0px 6px 6px 3px rgba(10, 10, 10, 0.2); top: -5px; } body { background-color: #e3e3e3; font-family: arial; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="card-container" onclick="flip(this)"> <div class="card"> <div class="front"> <p> front of card </p> </div> <div class="back"> <p> back of card</p> </div> </div> </div> <div class="card-container" onclick="flip(this)"> <div class="card"> <div class="front"> <p> front of card </p> </div> <div class="back"> <p> back of card</p> </div> </div> </div> 

我添加了一些樣式，只是為了說明卡片何時獲得flipped類。

Answer 4

您只能通過將翻轉功能修改為來定位選定的div

function flip(e) {
    $(e.target).toggleClass('flipped');
}