javascript - jQuery toggle button text and Icon -


i trying toggle both icon , button text on button , each function works independently, not work when run consecutively. seems function toggle button text removing icon altogether.

<button type="button" id="toggle-list-details">     <i class="fa fa-list fa-lg"></i>      list view </button> 
$("#toggle-list-details").click(function() {     $(this).text(function(i, text){         return text === " list view" ? " details view" : " list view";       });                                     $(this).find('i').toggleclass('fa-list fa-th-list');  )}; 

when

$(this).text(function(i, text){  

this reffers <button type="button" id="toggle-list-details">, replaces inner content plain text.

to avoid this, can smth this:

<button type="button" id="toggle-list-details">     <i class="fa fa-list fa-lg"></i>      <span class="text">list view</span> </button>  $("#toggle-list-details").click(function() {     $(this).find('span').text(function(i, text){         return text === " list view" ? " details view" : " list view";       });                                     $(this).find('i').toggleclass('fa-list fa-th-list');  )}; 

Comments

Popular posts from this blog

javascript - three.js lot of meshes optimization -

smartface.io - Proper way to change color scheme for whole application -

Email notification in google apps script -