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

c++ - Difference between pre and post decrement in recursive function argument -

php - Nothing but 'run(); ' when browsing to my local project, how do I fix this? -

php - How can I echo out this array? -