Как различить идентичные div для использования в функции DOM?

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, поскольку это было бы самым лучшим решением Iсчитать.

В противном случае я думаю, что мне нужно выработать способ увеличения имен div с помощью ejs.

Answer 1

Если карты существуют во время загрузки, сделайте это

$('.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 2

Если вы передадите 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 3

Вы можете настроить таргетинг только на выбранный div, изменив функцию переворачивания на

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

Answer 4

вы можете сделать это с помощью обработчика событий jquery click.найдите карточку в выбранном div вместо переворачивания всех карточек.

Удалите функцию onclick из html

<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");
  });
});