Поворот изображения при нажатии ссылки С jQuery

Question

У меня есть таблица со строками, в которой я хочу повернуть изображение стрелки до -90 градусов для каждой строки, которая нажала.i написала несколько кодов, но коды работали для всех стрелок в моей таблице. каждый щелкнул. Как я могу это сделать? вот мой Отрывок:

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

Вот решение с анимацией поворота:

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

.subRow { 
 
    padding:0; 
 
    background-color: #CFCFCF; 
 

 
} 
 
.content { 
 
    background-color: #CFCFCF; 
 
    display:none; 
 
} 
 
td .show img { 
 
    transition: transform 0.5s; 
 
} 
 
td .show img.showimg { 
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
}

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

Вот ваше решение

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

.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; 
 
}

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

сделать класс 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; 
}