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（）函数，该函数显示卡的背面，并在第二次单击时隐藏正面，反之亦然。我希望此功能仅适用于 current 卡，即用户单击的卡，当我单击它时，它会翻转 all 牌。

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

如何区分在DOM函数中使用的相同div？

4 个答案: