我有一个小的电子商务商店，每个产品都有一个用HTML、CSS和一小部分Jquery制作的小产品卡。问题是当我点击"；添加到购物车"；div，每个项目都被添加到购物车中，并为所有项目运行动画。我认为问题可能是因为每个产品卡的类/ID都是相同的，jquery只知道运行那个类，所以它运行所有的类，但有没有办法让jquery每个产品卡只运行一次动画？附代码：
HTML:
<div class="itemwrapper">
<div class="productcontainer">
<div class="cardtop" style="
background: url(images/collar-1.jpeg) no-repeat center center; background-size: contain;"></div>
<div class="cardbottom">
<div class="cardleft">
<div class="carddetails">
<h1>Multifunction Collar</h1>
<p>$21.99</p>
</div>
<div class="cardbuy"><img class="addtocart" src="images/cart-icon.png" width="85px" height="85px" /></div>
</div>
<div class="cardright">
<div class="carddone"><img src="images/done.png" width="85px" height="85px" /></div>
<div class="details">
<h1>Multifunction Collar</h1>
<p>Added to your cart</p>
</div>
<div class="cardremove"><img src="images/remove-icon.png" width="85px" height="85px" /></div>
</div>
</div>
</div>
<div class="cardinside">
<div class="cardicon"><img src="images/info.png" width="30px" height="30px" /> </div>
<div class="cardcontents">
<table class="cardtable">
<tr>
<th>Details: </th>
<th></th>
</tr>
<tr>
<td colspan="2" style="font-size: 15px">Multifunction collar with different hooks for tags and leash <br />This collar comes with fine high quality soft interior padding which is made exclusively from goat leather.</td>
</tr>
<tr>
<th>Quantity: </th>
<th></th>
</tr>
<tr>
<td><input type="number" id="quantity" name="quantity" min="1" max="5" value="1"></td>
</tr>
</table>
</div>
</div>
</div>
JS:
$('.cardbuy').click(function(){
$('.cardbottom').addClass("clicked");
});
$('.cardremove').click(function(){
$('.cardbottom').removeClass("clicked");
});
CSS：
.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"
})
"这个"；将引用被单击的元素。在您的代码中，您将所有元素作为类"的目标；cardbuy"；。