부트 스트랩 버튼 토글 클래스 문제

jQuery와 Bootstrap/CSS에 대해 이해하지 못해서 다소 실망한 문제가 있습니다. 이 부분에서 알 수 있듯이 jsFiddle. 파란색 카테고리 버튼을 클릭하면 새로운 새로운 CSS 클래스는 적용되지 않지만 다른 버튼은 잘 표시됩니다. 왜 이런 현상이 발생합니까?부트 스트랩 버튼 토글 클래스 문제

HTML :

이

<button type="button" class="btn btn-primary" id="btn_IncCat">Category</button> 
<button type="button" class="btn btn-success" id="btn_IncCat2">Category</button>

CSS :

.btn-primary { 
    color: #fff; 
    background-color: #428bca; 
    border-color: #357ebd; 
} 
.btn-success { 
    color: #fff; 
    background-color: #5cb85c; 
    border-color: #4cae4c; 
}

jQuery를이 :.

$(document).ready(function() { 
    $('#btn_IncCat').click(function() { 
     // $('#btn_IncCat').css({ 'background-color': '#5cb85c','border-color': '#4cae4c' }) 
     $('#btn_IncCat').toggleClass('btn btn-success') 
    }) 
})

출처

2015-01-26 Mike Hughes

: 그래서 당신은 당신의 코드를 변경합니다. 어떤 행동을 기대합니까? –

버튼을 클릭하면 녹색으로 표시되고 다음 번에 파란색으로 바뀌면 좋아할 것입니다. 오른쪽 – amtest

그냥 btn-primary와 swt-success를 교환하고 싶습니다. –

당신이 $ ('#의 btn_IncCat')를 사용 toggleClass는 (성공 BTN ')가있다

if($('#btn_IncCat').hasClass('btn btn-success')) { 
    $('#btn_IncCat').removeClass('btn btn-success') 
} else { 
    $('#btn_IncCat').addClass('btn btn-success') 
}

첫 번째 문제는 btn 클래스를 제거 할 필요가 없다는 것이 었습니다. 부트 스트랩은이 클래스를 사용하여 채우기, 테두리, 테두리 반경, 여백 및 다른 속성을 설정하여 클래스 btn에 지정된 색상 만 변경하려고했습니다. 차적인 그래서 대신

$('#btn_IncCat').toggleClass('btn btn-success');

의

if ($('#btn_IncCat').hasClass('btn-success')) { 
    $('#btn_IncCat').removeClass('btn-success').addClass('btn-primary'); 
} else { 
    $('#btn_IncCat').removeClass('btn-primary').addClass('btn-success'); 
}

을하거나 더 나은

$('#btn_IncCat').toggleClass('btn-primary btn-success')

여기,이 정말 간단한 예 http://jsfiddle.net/wLxhj4ht/5/

출처

2015-01-26 11:03:07

감사합니다. 잘못된 컨텍스트에서 toggleclass를 사용 했습니까? –

@MikeHughes 업데이트했습니다. –

HTML

<button type="button" class="btn btn-success" 
id="btn_IncCat">Category</button>

JQuery와

$(document).ready(function() { 
    $('#btn_IncCat').click(function() { 
     if($(this).hasClass('btn-primary')){ 
     $(this).removeClass('btn-primary'); 
     $(this).addClass('btn-success'); 
     }else{ 
     $(this).removeClass('btn-success'); 
     $(this).addClass('btn-primary'); 
     } 
    }); 
});

출처

2015-01-26 11:04:37 amtest

좋아입니다.

당신은 당신은 인자로 주어진 각각의 클래스를 전환하는

$('#btn_IncCat').toggleClass('btn btn-success')

을 수행 할 때. btn과 btn-success을 입력 했으므로 버튼을 클릭하면 해제됩니다.

하지만 btn 클래스를 올바르게 유지 하시겠습니까? 그래서 당신은 그것을 토글해서는 안됩니다. btn-primary과 btn-success을 번갈아 전환하고 싶습니다. 당신이 그 스타일과 버튼을 제공하는`btn을-primary` 클래스를 제거 버튼의 클릭에

$('#btn_IncCat').toggleClass('btn-primary btn-success')

http://jsfiddle.net/wLxhj4ht/4/

출처

2015-01-26 11:06:04

부트 스트랩 버튼 토글 클래스 문제

답변

관련 문제