Bild drehen, wenn ein Link geklickt wird Mit jQuery

Question

Ich habe eine Tabelle mit Zeilen, die ich drehen möchte Pfeil Bild zu -90 Grad für jede Zeile, die angeklickt.Ich schrieb einige Codes, aber die Codes funktionierten für alle Pfeile in meiner Tabelle.nicht für jeder der geklickt hat. wie kann ich das machen? hier ist mein Snippet:

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

Dank

Answer 1

Mit CSS transform:

• http://www.cssportal.com/blog/rotating-images-with-css/

Jedes Mal, wenn der Link angeklickt wird, wir eine neue Klasse der Anwendung Elternteil des Bildes genannt active und das Bild drehen, wenn die Klasse angewendet wird:

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

Wenn Sie Animationen haben möchten, können Sie verwenden transition:

transition: transform 0.5s; 

hinzufügen Zu der .active img Klasse

Answer 2

Hier ist eine Lösung mit der Animation von drehen:

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

Hier ist Ihre Lösung

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

eine CSS-Klasse Stellen wie diese

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

und Ihre JS wie

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

Und wenn Sie Ihren Pfeil animieren möchten, fügen Sie folgende in Ihrem CSS-Code

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