jQuery .toggleClass가 CSS 클래스를 전환하지 않습니다

엄청난 아마추어 질문에 대해 유감스럽게 생각합니다.하지만 저의 삶에 대해 저는 여기서 잘못하고있는 것을 알아 내지 못합니다. 내 버튼을 타겟팅해야하는 또 다른 방법이 있습니까?jQuery .toggleClass가 CSS 클래스를 전환하지 않습니다

HTML :

<form> 
    <input id="button" type="submit" value="Click Me"> 
    </form>

CSS :

#button { 
background-color: #AABF1A; 
cursor: pointer; 
font-size: 25px; 
padding: 5px; 
margin-right: 10px; 
border: 1px solid grey; 
} 

.highlight { 
background-color: #555BBB; 
cursor: pointer; 
font-size: 25px; 
padding: 5px; 
margin-right: 10px; 
border: 1px solid grey; 
}

jQuery를 : 귀하의 jQuery 코드가 작동

$(document).ready(function() { 
    $("#button").click(function() { 
     $(this).toggleClass("highlight"); 
    }); 
});

출처

2014-05-22 dpren

. 양식 제출 및 페이지 재로드를 중지하기 위해 어떤 조치를 취하고 있습니까? – j08691

버튼 클릭시 양식을 제출하는 경우 토글 효과가 표시되지 않습니다. 버튼을 클릭하면 페이지가 떠난/새로 고침됩니다. 강조 표시 기능이 표시되지 않습니다. 버튼 클릭시 양식을 제출하지 않으려면 버튼 유형을 '제출'에서 '버튼'으로 변경하십시오. –

HTML에 동일한 id # 버튼이있는 다른 요소가 있습니까? 그 검사실에 수업이 없다는 것을 일부 검사관에게 확인 했습니까? 아니면 당신이 당신이 기대했던 스타일을보고 있다고 말하고 있습니까? –

. 문제는 .highlight 클래스가 #button 선택기로 요소에 배치 된 스타일을 재정의 할만큼 충분히 높은 특이성을 갖고 있지 않다는 것입니다. 이에 CSS를 변경해보십시오 :

#button.highlight { 
    background-color: #555BBB; 
}

출처

2014-05-22 20:33:08

을 제거하십시오 왜 downvotes입니까? 그는 절대적으로 맞습니다! – LcSalazar

downvoters에게 Ok. 예 버튼이 양식을 제출하지 못하도록해야합니다. 그러나 이것이 수업 변경이 '작동하지 않는 것'으로 보이는 이유입니다. –

OP에 양식 제출을 방해하는 처리기가 있다고 가정하면 (이 코드는 사용자에게 모든 코드를 표시하지 않을 수 있음) 다음은 대답입니다. –

전체 코드 :

$(document).ready(function() { 
$("#button").click(function(event) { 
    event.preventDefault 
    $(this).toggleClass("highlight"); 
}); 
});

근무 바이올린 : A는 버튼을 제출의 http://jsfiddle.net/robertrozas/9g8Jj/2/

출처

2014-05-22 20:39:37 Hackerman

jQuery .toggleClass가 CSS 클래스를 전환하지 않습니다

답변

관련 문제