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

Question

我有一个包含行的表格，我想将单击的每一行的箭头图像旋转到 -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>

谢谢

Answer 1

使用 CSS 转换:

• > http://www.cssportal.com/blog/rotating-images-with-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 类