Javascript 使用jQuery单击链接时旋转图像

我有一个表，表中的每一行我都希望将箭头图像旋转到-90度。我编写了一些代码，但这些代码适用于表中的所有箭头。而不是每个单击的箭头。我该怎么做？以下是我的片段：

$（函数（）{
$（“.show”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（this）.closest（“tr”）.next（）.find（“.content”）.slideToggle（）；
});
});
.subRow{
填充：0；
背景色：#CFCFCF；
}
.内容{
背景色：#CFCFCF；
显示：无；
}

试验台
第1栏
第2栏
第3栏
第4栏
第5栏
测试单元
测试单元
测试单元
测试单元
我爱你，我爱你

测试单元
测试单元
测试单元
测试单元
我爱你，我爱你

使用CSS
转换
：




每当单击链接时，我们都会将一个名为
active
的新类应用于图像的父级，并在应用该类时旋转图像：


$（函数（）{
$（“.show”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（this.parent（）.toggleClass（'active'））
$（this）.closest（“tr”）.next（）.find（“.content”）.slideToggle（）；
});
});
。活动img{
-webkit变换：旋转（-90度）；
-moz变换：旋转（-90度）；
-ms变换：旋转（-90度）；
-o变换：旋转（-90度）；
变换：旋转（-90度）；
}
代位权{
填充：0；
背景色：#CFCFCF；
}
.内容{
背景色：#CFCFCF；
显示：无；
}

试验台
第1栏
第2栏
第3栏
第4栏
第5栏
测试单元
测试单元
测试单元
测试单元
我爱你，我爱你

测试单元
测试单元
测试单元
测试单元
我爱你，我爱你

这是您的解决方案


$（函数（）{
$（“.show”）。在（“单击”上，函数（e）{
e、 预防默认值（）；
$（this）.closest（“tr”）.next（）.find（“.content”）.slideToggle（）；
$（此）.toggleClass（“旋转”）；
});
});
.subRow{
填充：0；
背景色：#CFCFCF；
}
.内容{
背景色：#CFCFCF；
显示：无；
}
.show.rotate>img{
-ms变换：旋转（-90度）；/*IE 9*/
-webkit变换：旋转（-90度）；/*铬合金、Safari、Opera*/
变换：旋转（-90度）；
转变：转变0.5s；
}

试验台
第1栏
第2栏
第3栏
第4栏
第5栏
测试单元
测试单元
测试单元
测试单元
我爱你，我爱你

测试单元
测试单元
测试单元
测试单元
我爱你，我爱你

创建这样的CSS类

.rotate{
   transform: rotate(-90deg)
}

你的JS怎么样

$(function() {
  $(".show").on("click", function(e) {
    e.preventDefault();
    $(this).find('img').toggleClass('rotate')
    $(this).parent().toggleClass('active')
    $(this).closest("tr").next().find(".content").slideToggle();
  });
});

如果你想让你的箭头动画化，在你的CSS代码中添加以下内容

td .show img {
  transition: transform 0.5s;
}

非常感谢你！不客气，祝您在HTML/CSS/JS:）的旅程中好运！