내 jquery 피들이 작동하지 않습니다

Question

내 피들은 내가하려는 일의 일부만 보여줍니다. 그러나 첫 번째 부분도 작동하지 못하기 때문에 두 번째 부분을 추가하지 않았습니다.

첫 번째 부분

두 형태가있다. 두 번째 형식은 클래스가 "display : none;"으로 설정되어있어 보이지 않습니다.

첫 번째 양식에서 "보내기"를 누르면 그 양식이 사라지고 form2에서 클래스가 변경되어 표시됩니다.

내 바이올린이 http://jsfiddle.net/mjmitche/KvwGw/

주에서 내 미약 한 시도, 나는 초보자 그래서 가능한 한 많은 설명을 제공하시기 바랍니다 해요 보여줍니다. (그들에게 등을 게시 할 위치를 알하지 않았기 때문에 나는 바이올린에 적절한 양식을 작성하지 않은, 주)

초 (unattempted) 파트 송신이 제 2 형태를 클릭하면

, I 두 번째 양식을 사라지게하는 콜백 기능을 원합니다.

가능한 경우 도움을 받으십시오.

많은 감사를드립니다!

Answer 1

여기 있습니다. 다음은 업데이트되고 작동하는 것입니다.your fiddle updated

당신이 필요합니다 : 만약 거기에 아무것도 희망 당신은 그 차이를 알 수 있습니다,이 시도

http://jsfiddle.net/KvwGw/2/

이해 번째 부분

$('#form2').submit(function() { 
    // add form submit stuff in there 

    $(this).fadeOut(); //fades out form 
    return false; //prevents form from submitting to the form action 

}); 

Answer 2

귀하의 구문입니다 그냥, 조금 떨어져 :

.css(display:block); 

Should be :

.css({display:"block"}); 

나 :

.css("display", "block"); 

or simply :

.show(); 

You can test it out here.

또한 잘못된 요소 인 <blah>은 (는) .hide()이 작동하지 않는다는 것을 의미하므로 실제 요소는 <div>입니다.

---

편집 : 당신이 비슷한 핸들러 일회성를 첨부하거나 일반적인 클래스 n 수에 대한 양식 제네릭 할 수 있습니다 두 번째 부분에 대한. 대신 그들은 모두 class="form"했다 말하자면, 당신은 다만 수 :

$(".form").submit(function() { 
    $(this).hide(1000,function() { 
     $(this).next(".form").show(); 
    }); 
    return false; //prevent actually submitting for this demo 
}); 

을 ... 실제 페이지 구조에 필요한 경우 .next() 될 some other relative find을 조정. 이 방법은 매우 간단한 양식으로 여러 양식에서 사용할 수 있습니다 (you can test it out here).

Answer 3

하지 않는 알려 CSS 표기법을 오브젝트 표기법 괄호로 감싸거나 다음과 같이 쉼표로 구분 된 문자열로 바꾸십시오 : .css("display", "block")