버튼 클릭시 버튼 텍스트 및 아이콘 파일 (글꼴 굉장) 변경

Question

단추의 텍스트와 클릭시 연관된 아이콘 파일을 변경하려고 시도하고 클릭시 다시 반대로 변경하려고합니다. 거기에 절반 방법이있어 아이콘의 클래스와 단추의 색을 토글 할 수 있지만 텍스트 또는 html 단추를 변경하려고하면 아이콘 참조가 제거됩니다. 이 모든 일

HTML에게 당신은 if($("#openNewSale").is(":hidden"))를 사용 openNewSale의 표시 상태를 확인하고

따라 클래스를 변경할 수 있습니다

$("#newSale").click(function() { 
    $("#openNewSale").slideToggle("slow", function() { 
    $('#newSale').toggleClass('btn-success').toggleClass('btn-danger'); 
    $('#iconChange').toggleClass('fa-plus').toggleClass('fa-minus'); 
    }); 
}); 

Answer 1

<button type="button" class="btn btn-success btn-sm" id="newSale"> 
    <i id="iconChange" class="fa fa-plus"></i> add new 
</button> 

의 .js

을 얻을 수있는 더 효율적인 방법이 있나요

$("#newSale").click(function() { 
    $("#openNewSale").slideToggle("slow", function() { 
    $('#newSale').toggleClass('btn-success').toggleClass('btn-danger'); 
     if($("#openNewSale").is(":hidden")) 
     { 
      $("#newSale").html('<i id="iconChange" class="fa fa-plus"></i> add new');  
     } 
     else 
     { 
      $("#newSale").html('<i id="iconChange" class="fa fa-minus"></i> remove'); 
     } 
    }); 
}); 

FIDDLE