Javascript 基于类名设置元素动画（许多项共享同一类）

我有一个在线商店，每当用户单击“添加到购物车”时，我需要添加一个动画，将产品图像移动到购物车框中，问题是每当我单击“添加到购物车”时，动画将应用于所有产品

HTML（这是一个项目的HTML，所有其他项目都相同）：

$（文档）.ready（函数（）{
$（“.addToCart”）。单击（函数（）{
$（“.proImage”）.animate({
左：'250px'，
});
});
});
您应该使用
this
关键字和
parent（）
方法前往父级并选择相关的
img
：

$(this).parent().find(".proImage").animate({
    left: '250px',
});

您还可以使用
closest（）
类似于：

$(this).closest('div').find(".proImage").animate({
    left: '250px',
});

在您的情况下，使用
prev（）
方法将有两种效果：

$(this).prev(".proImage").animate({
  left: '250px',
});


$（文档）.ready（函数（）{
$（“.addToCart”）。单击（函数（e）{
e、 预防默认值（）；
$（this.prev（“.proImage”）.animate({
左：'250px'，
});
});
});
.proImage{
位置：相对位置；
}

您可以这样使用：

$(document).ready(function(){
     $(".addToCart").click(function(){
        $(this).siblings('.proImage').animate({
             left: '250px',
         });
    });
});

检查我答案中的工作片段。。。注意
位置：相对left更改位置，请使用code>rule；正确的；顶部下
attributes很高兴我能帮助哥哥。