我有一个包含行的表格,我想将单击的每一行的箭头图像旋转到 -90 度。我写了一些代码,但这些代码适用于我表格中的所有箭头。而不是每个单击的箭头。我怎样才能做到这一点?这是我的片段:
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
$(this).closest("tr").next().find(".content").slideToggle();
});
});
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<caption>Test Table</caption>
<thead>
<tr align="center" class="parentRow">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr class="parentRow">
<td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left-red.png"/></a>
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
<tr class="parentRow">
<td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left-red.png"/></a>
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
</tbody>
</table>
最佳答案
使用 CSS 转换
:
每当单击链接时,我们都会将一个名为 active
的新类应用于图像的父级,并在应用该类时旋转图像:
$(function() {
$(".show").on("click", function(e) {
e.preventDefault();
$(this).parent().toggleClass('active')
$(this).closest("tr").next().find(".content").slideToggle();
});
});
.active img {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.subRow {
padding:0;
background-color: #CFCFCF;
}
.content {
background-color: #CFCFCF;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table style="width:50%" border="1">
<caption>Test Table</caption>
<thead>
<tr align="center" class="parentRow">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr class="parentRow">
<td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left-red.png"/></a>
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
<tr class="parentRow">
<td><a href="#" class="show">SHOW <img src="http://user.efeh.com/images/arrow-left-red.png"/></a>
</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
<td>test cell</td>
</tr>
<tr class="subRow">
<td colspan="5">
<div class="content"><p>Lorem ipsum dolor sit amet...</p></div>
</td>
</tr>
</tbody>
</table>
如果你想要有动画,你可以使用transition
:
transition: transform 0.5s;
将此添加到 .active img
类
关于javascript - 使用 jQuery 单击链接时旋转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41085416/