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 transform：

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类

Answer 2

制作一个像这样的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;
}

Answer 3

这是您的解决方案

＆＃13;

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

＆＃13;

.subRow {
  padding:0;
  background-color: #CFCFCF;

}
.content {
  background-color: #CFCFCF;
  display:none;
}
.show.rotate>img{
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    transition: transform 0.5s;
}

＆＃13;

<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>

＆＃13;

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

3 个答案: