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
Post a Comment