토글 jquery 아이콘 변경

Question

단추를 클릭하여 표시/숨기기 옵션에서 텍스트와 아이콘을 변경할 수있었습니다. 그러나 아이콘이 단추에 적용되면 글꼴 집합이 변경됩니다.

버튼에 클래스를 추가하면 글꼴 썸네일 아이콘 CSS에 적용되므로 아이콘의 글꼴 모음이 변경되어 나타나지 않습니다.

글꼴 혼자만의 아이콘에 영향을주지 않고 텍스트 만 글꼴 그룹을 설정하는 방법이 있습니까?

HTML 코드 :

<button class="btn btn-default" type="search" id="filter"> 
      <i class="fa fa-down"></i> 
       Show 
</button> 

JQuery와 :

$("#filter").click(function(e) { 
      $(this).toggleClass("active").next().slideToggle("fast"); 

if ($.trim($(this).text()) === 'Show') { 
    $(this).text('Hide'); 
    $(this).addClass('fa fa-up'); 
// $(this).addClass('custom-font'); 
} else { 
    $(this).text('Show Filter'); 
    $(this).addClass('fa fa-down'); 
    } 

return false; 

    }); 

Answer 1

당신은 두 가지 문제가 있습니다. 텍스트 노드 대신 버튼의 전체 내용을 .text()으로 바꿉니다. 따라서 아이콘을 유지하려면 텍스트 노드 만 바꾸면됩니다. 그런 다음 버튼 대신 아이콘의 클래스를 변경해야합니다.

if ($.trim($(this).text()) === 'Show') { 
    $(this).contents().last()[0].textContent = 'Hide'; 
    $(this).find('.fa').removeClass('fa-down').addClass('fa-up'); 
// $(this).addClass('custom-font'); 
} else { 
    $(this).contents().last()[0].textContent = 'Show Filter'; 
    $(this).find('.fa').removeClass('fa-up').addClass('fa-down'); 
} 

또는, 당신은 단지 새와 기존의 HTML을 대체 할 .html를 사용할 수 있습니다.

if ($.trim($(this).text()) === 'Show') { 
    $(this).html('<i class="fa fa-up"></i>Hide'); 
// $(this).addClass('custom-font'); 
} else { 
    $(this).html('<i class="fa fa-down"></i>Show Filter'); 
}