如何将相同的Javascript代码分配给多个div而不同时运行它

我有一个小的电子商务商店，每个产品都有一个小的产品卡片，上面有HTML、CSS和一点Jquery动画。问题是，当我单击“添加到购物车”div时，每个项目都会添加到购物车中，并且所有项目的动画都会运行。我认为问题可能是因为产品卡的类/ID对于每个卡都是相同的，jquery只知道运行该类，所以它运行所有这些类，但是有没有办法使jquery只对每个产品卡运行一次动画？代码见附件：

HTML:

CSS:

---

我想你会想要这样的东西

$('.cardbuy').on('click', function() {
    $(this).parent('.cardbottom').addClass('clicked') // find the closest parent element with the class "cardbottom" and add the "clicked"
})

---

“this”将引用已单击的元素。在您的代码中，您使用“cardbuy”类瞄准所有元素。

我想您会想要这样的东西

$('.cardbuy').on('click', function() {
    $(this).parent('.cardbottom').addClass('clicked') // find the closest parent element with the class "cardbottom" and add the "clicked"
})

---

“this”将引用已单击的元素。在您的代码中，您针对的是“cardbuy”类的所有元素。

在我的代码中，单击的元素是一个“添加到购物车”图标，“this”是否指该图标？每个产品卡中都使用相同的图标，每个图标都有“.cardbuy”类，这就是导致问题的原因。这仍然有效吗？

$（this）

将引用在本例中单击的具有该类的特定元素。因此，当您单击该产品图标时，它将查看特定的

.cardbuy

元素，然后您将遍历dom，查看带有

cardbooth

的类的最接近的

父元素，并将类
单击的
添加到该元素中。在我的代码中，单击的元素是“添加到购物车”图标，那么“这个”指的是图标吗？每个产品卡中都使用相同的图标，每个图标都有“.cardbuy”类，这就是导致问题的原因。这仍然有效吗？
$（this）
将引用在本例中单击的具有该类的特定元素。因此，当您单击该产品图标时，它将查看特定的
.cardbuy
元素，然后您将遍历dom，查看带有
cardbooth
的类的最接近的
父元素，并将类
单击的
添加到该元素中。
.itemwrapper {
    all: revert;
    width: 300px;
    height: 500px;
    background: white;
    margin: auto;
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0;
    transform: scale(0.95);
    transition: box-shadow 0.5s, transform 0.5s;
}

.itemwrapper:hover {
    transform: scale(1);
    box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
}

.itemwrapper .productcontainer {
    width: 100%;
    height: 100%;
}

.itemwrapper .productcontainer .cardtop {
    height: 80%;
    width: 100%;
    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
}

.itemwrapper .productcontainer .cardbottom {
    width: 200%;
    height: 20%;
    transition: transform 0.5s;
}

.itemwrapper .productcontainer .cardbottom.clicked {
    transform: translateX(-50%);
}

.itemwrapper .productcontainer .cardbottom h1 {
    margin: 0;
    padding: 0;
}

.itemwrapper .productcontainer .cardbottom p {
    margin: 0;
    padding: 0;
}

.itemwrapper .productcontainer .cardbottom .cardleft {
    height: 100%;
    width: 50%;
    background: #f4f4f4;
    position: relative;
    float: left;
}

.itemwrapper .productcontainer .cardbottom .cardleft .carddetails {
    padding: 15px;
    float: left;
    width: calc(70% - 40px);
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy {
    float: right;
    width: calc(30% - 3px);
    height: 100%;
    background: #f1f1f1;
    transition: background 0.5s;
    border-left: solid thin rgba(0, 0, 0, 0.1);
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy i {
    font-size: 30px;
    padding: 30px;
    color: #254053;
    transition: transform 0.5s;
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy:hover {
    background: #A6CDDE;
}

.itemwrapper .productcontainer .cardbottom .cardleft .cardbuy:hover i {
    transform: translateY(5px);
    color: #00394B;
}

.itemwrapper .productcontainer .cardbottom .cardright {
    width: 50%;
    background: #A6CDDE;
    color: white;
    float: right;
    height: 200%;
    overflow: hidden;
}

.itemwrapper .productcontainer .cardbottom .cardright .details {
    padding: 10px;
    float: right;
    width: calc(70% - 40px);
}

.itemwrapper .productcontainer .cardbottom .cardright .carddone {
    width: calc(30% - 2px);
    float: left;
    transition: transform 0.5s;
    border-right: solid thin rgba(255, 255, 255, 0.3);
    height: 50%;
}

.itemwrapper .productcontainer .cardbottom .cardright .carddone i {
    font-size: 30px;
    padding: 30px;
    color: white;
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove {
    width: calc(30% - 1px);
    clear: both;
    border-right: solid thin rgba(255, 255, 255, 0.3);
    height: 50%;
    background: #BC3B59;
    transition: transform 0.5s, background 0.5s;
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove:hover {
    background: #9B2847;
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove:hover i {
    transform: translateY(5px);
}

.itemwrapper .productcontainer .cardbottom .cardright .cardremove i {
    transition: transform 0.5s;
    font-size: 30px;
    padding: 30px;
    color: white;
}

.itemwrapper .productcontainer .cardbottom .cardright:hover .cardremove,
.itemwrapper .productcontainer .cardbottom .cardright:hover .carddone {
    transform: translateY(-100%);
}

.itemwrapper .cardinside {
    z-index: 9;
    background: rgb(255, 232, 209);
    width: 140px;
    height: 140px;
    position: absolute;
    top: -70px;
    right: -70px;
    border-radius: 0px 0px 200px 200px;
    transition: all 0.5s, border-radius 2s, top 1s;
    overflow: hidden;
}

.itemwrapper .cardinside .cardicon {
    position: absolute;
    right: 85px;
    top: 85px;
    color: white;
    opacity: 1;
}

.itemwrapper .cardinside:hover {
    width: 100%;
    right: 0;
    top: 0;
    border-radius: 0;
    height: 80%;
}

.itemwrapper .cardinside:hover .cardicon {
    opacity: 0;
    right: 15px;
    top: 15px;
}

.itemwrapper .cardinside:hover .cardcontents {
    opacity: 1;
    transform: scale(1);
    transform: translateY(0);
}

.itemwrapper .cardinside .cardcontents {
    padding: 5%;
    opacity: 0;
    transform: scale(0.5);
    transform: translateY(-200%);
    transition: opacity 0.2s, transform 0.8s;
}

.itemwrapper .cardinside .cardcontents .cardtable {
    text-align: left;
    width: 100%;
}

.itemwrapper .cardinside .cardcontents h1,
.itemwrapper .cardinside .cardcontents p,
.itemwrapper .cardinside .cardcontents .cardtable {
    color: black;
}

.itemwrapper .cardinside .cardcontents p {
    font-size: 13px;
}

$('.cardbuy').on('click', function() {
    $(this).parent('.cardbottom').addClass('clicked') // find the closest parent element with the class "cardbottom" and add the "clicked"
})