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

我的前端有一套“卡片”，正面和背面各一张，这些卡片是根据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>

我的第一个解决方案是尝试增加类名（card1、card2等）并为每个不同的类名复制函数，但是下面的示例语法给了我一个错误，即找不到document对象，这可能与我正在使用ejs有关

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

我希望jQuery中有一个解决方案，允许您指定只在1个div上执行该函数，或者在所选div的子级上执行该函数，因为我认为这是最简洁的解决方案

---

否则，我认为我需要找到一种通过ejs增加div名称的方法

您可以使用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>

---

您可以使用jqueryclick事件处理程序来完成这项工作。从单击的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>

---

如果从

onclick

函数中传递

此

，则在翻转函数中使用它相对容易：

函数翻转（元素）{
$（元素）.toggleClass（'flipped'）；
}

.card容器{
背景色：rgba（255、245、250、0.9）；
边框顶部：实心10px rgb（50200100）；
盒影：0px 2px 1px 1px rgba（10,10,10,0.3）；
填充：10px；
边缘底部：20px；
位置：相对位置；
排名：0；
过渡：所有0.3秒缓解；
}
.翻了{
盒影：0px 6px 6px 3px rgba（10,10,10,0.2）；
顶部：-5px；
}
身体{
背景色：#E3；
字体系列：arial；
}

卡片正面

卡片背面

卡片正面

卡片背面

如果从

onclick

函数中传递

此

，则在翻转函数中使用它相对容易：

函数翻转（元素）{
$（元素）.toggleClass（'flipped'）；
}

.card容器{
背景色：rgba（255、245、250、0.9）；
边框顶部：实心10px rgb（50200100）；
盒影：0px 2px 1px 1px rgba（10,10,10,0.3）；
填充：10px；
边缘底部：20px；
位置：相对位置；
排名：0；
过渡：所有0.3秒缓解；
}
.翻了{
盒影：0px 6px 6px 3px rgba（10,10,10,0.2）；
顶部：-5px；
}
身体{
背景色：#E3；
字体系列：arial；
}

卡片正面

卡片背面

卡片正面

卡片背面

您只能通过将翻转功能修改为

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

---

通过将翻转函数修改为，只能将选定的div作为目标

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

---

如果卡在加载时存在，请执行此操作

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

或

如果没有，则需要委派：

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

---

$（文档）

可以更改为任何静态父容器

如果卡在加载时存在，请执行此操作

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

或

如果没有，则需要委派：

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

---

---

$（文档）

可以更改为任何静态父容器

查看我对问题的评论是的，我刚刚在发布我的答案后看到了你的评论。用户可以按照相同的应用程序来帮助您查看我对问题的评论是的，我刚刚在发布我的答案后看到了您的评论。用户可以遵循相同的应用程序来帮助您原谅我的无知，但e是什么<代码>函数翻转（e）{$（e）.toggleClass（'fliped'）；}无需道歉<在本文中，code>e是

this

，因为这是您使用

onclick

传递的内容。在此上下文中，

this

是被单击的dom元素。变量名称选择不当，因为（e）通常是事件-也传递此消息，然后必须jQuery，这不是好的做法。使用不引人注目的事件处理更好。。。。还是元素？我见过e经常用于这两个词。实际上，使用单个字母命名变量从来都不是一个好的做法。如果这是正确的代码，而不是一些随机堆栈溢出的答案，我会付出更多的努力。不管怎样，我都会更新答案。请原谅我的无知，什么是e<代码>函数翻转（e）{$（e）.toggleClass（'fliped'）；}无需道歉<在本文中，code>e是

this

，因为这是您使用

onclick

传递的内容。在此上下文中，

this

是被单击的dom元素。变量名称选择不当，因为（e）通常是事件-也传递此消息，然后必须jQuery，这不是好的做法。使用不引人注目的事件处理更好。。。。还是元素？我见过e经常用于这两个词。实际上，使用单个字母命名变量从来都不是一个好的做法。如果这是正确的代码，而不是一些随机堆栈溢出的答案，我会付出更多的努力。不管怎样，我都会更新答案。这只适用于同时使用

onclick

属性传入

This

的情况。我相信，无论是否传入，事件对象都会被传入。因此，在单击中传递this或not属性是sameI，我相当确定它不是；我编写了代码来测试它，除非通过测试，否则不会通过任何测试。也许您可以包含一个代码段来显示此操作，而不必通过

onclick

传递

this

？只有在您也使用

onclick

属性传递

this

时，此操作才会起作用。无论是否传递事件对象，事件对象都会被传递