jQuery 부트스트랩 버튼 클래스 변경하기
버튼을 클릭하면 아작스를 통해서 서버로 보낸다음 버튼의 색을 변경하고 명칭도 변경하여 목록으로 이동 할 수 있게 하는 기능을 만들다 보니 이런것이 필요하게 되었습니다.
처음의 버튼은 '글 삭제하기'였습니다.
그리고 클릭하여 정상적으로 삭제가 되면 메시지를 하나 보여주고 '정상적으로 삭제 되었습니다.'
그리곤 아래의 jquery 명령으로 버튼를 변경해 줍니다.
- 버튼의 명칭을 변경합니다.
- onclick 특성을 줘서 클릭하면 주소를 이동합니다.
- 부트스트랩의 클래스를 변경하여 버튼의 색이 바뀌게 합니다.
$('#del_btn').html(' 목록으로 이동하기 ');
$("#del_btn").attr("onclick", "location.replace('/list.php')");
$("#del_btn").attr('class','btn btn-success');
// <button id='del_btn1'> 글 삭제 하기 </button>
$('#del_btn1').click(function() {
if ( $(this).html() == ' 글 삭제 하기 ' ) {
$(this).html('버튼의 명칭을 변경한다');
// .. 필요한 명령실행
}
});
// <input type='button' value=' 글 삭제 하기 ' id='del_btn2' />
$('#del_btn2').click(function() {
if ( $(this).val() == ' 글 삭제 하기 ' ) {
$(this).val('버튼의 명칭을 변경한다');
// .. 필요한 명령실행
// 클래스 추가
$(this).addClass("class_name");
// 클래스 제거
$(this).removeClass("class_name");
}
});
