질문과 대답 신청서를 작성하고 있습니다.여러 가능한 필드를 확인하는 기능
http://jsfiddle.net/kaninepete/4YTA6/
어떻게이 같은 종류의 두 개 이상의 질문을 할 수 있도록 확장 할 수 있습니다?
나는 기능을 확인하기 위해 마녀 필드를 알지 못합니다.
미리 감사드립니다.
편집 각 답을 개별적으로 확인하고 싶습니다. 각 질문마다 새로운 양식이 필요합니까?
기술적으로는 효과가 있지만 꽤 많은 정리를 할 수 있습니다 - 건설적인 비판을 환영합니다. (HTML 파일을 실제로 유효하게 만들고, jQuery에 직접 연결하지 말고, jQuery를 정리하는 등. 저는 jQuery 전문가가 아닙니다.) 자바 스크립트가 적절한 HTML을 찾고 응답을 표시하는 경로를갔습니다. (대신 건물의 HTML 자바 스크립트 배열을 기반으로.)
할 수 있습니다 기본적으로 <li>...</li> 물건을 붙여 - 복사 및 각 질문에 대한 q- 및 a-를 다음 수를 변경하고 작동합니다. 이상적으로
, 우리는 답을 확인하기 위해 서버 측 프로그래밍을 사용하는 것 (클라이언트가 쉽게 답변을 볼 수 있기 때문이다.)
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js" ></script>
</head>
<body>
<form name="myform" id="myform">
<p>Make each of the following possessive by adding the appropriate apostrophe where needed. </p>
<ol type="1">
<li>boys:
<input type="text" name="q-1" /><!-- field for user input -->
<input type="hidden" name="a-1" value="boy's" /><!-- answer -->
</li>
<li>girls:
<input type="text" name="q-2" />
<input type="hidden" name="a-2" value="girl's" />
</li>
</ol>
<p><input type="button" id="validate-btn" value="Check" /></p>
</form>
<script type="text/javascript">
$('document').ready(function() {
$('#validate-btn').click(function() {
$(this).css('display','none');
$('[name|="q"]').each(function() {
// find the associated answer
var pattern = /q\-([0-9]+)/; // regular expression to pull question/answer number from field name
var result = pattern.exec($(this).attr('name'))[1]; // get the question/answer number
// you could probably just navigate around with DOM to get the next hidden text field instead, eh.
// get reference to the input with the answer
var answerbox = $('[name="a-'+result+'"]');
$(this).attr('disabled',true);
// verify answer, display replacement text
if($(this).val() == answerbox.val()) {
$(this).replaceWith(' <strong>Correct!</strong>');
} else {
$(this).replaceWith(' <strong>Incorrect! The answer was "'+ answerbox.val() +'"</strong>');
}
});
});
});
</script>
</body>
이렇게하면 각 문제를 개별적으로 확인할 수 있습니다. 나는 당신의 대답을 완전히 이해하지 못하고 있지만 지금은 그걸 가지고 놀고 있습니다. – Kaninepete
예, 사용자가 대답하기를 원하는 각 질문마다 새로운 <input> 요소가 필요합니다.
더 많은 질문을 할 수 있도록 내 기능을 어떻게 변경해야할지 모르겠다. – Kaninepete
참고로,'합법적으로 시작되지 않을 수 속성 id' 숫자. – Phrogz
더 많은 질문을 추가 할 때, 이들은 동일한 "아포스트로피 추가"질문입니까, 아니면 서로 다른 질문입니까? 또한 JavaScript 내에서 정의 된 질문을 배열로 원한다면 마술처럼 거기에서 HTML을 만들거나 간단히 숨겨진 양식 필드를 기반으로 HTML에서 몇 가지 JavaScript 유효성 검사 질문을 갖기 만하면됩니까? 밖에 아이디어를 던지기. – Guttsy
동일한 형식의 여러 기능. 배열을 만들면 괜찮을 것입니다. 나는 이것을 시험해보기 위해 타이핑하고있었습니다. 실제 문제는 필드를 한 번에 하나씩 확인하는 기능을 얻는 것이고, 필요한 경우가 아니라 한꺼번에하는 것입니다. – Kaninepete