JS/jQuery - 사용자 입력을 기반으로 결과 표시

저는이 프로젝트에 대해 생각해 봤습니다. 이제는 내가 한 일은 질문 목록, 간단한 예/아니오 질문이있는 양식입니다. 응답하고 제출하면 동일한 페이지에서 관련 데이터를 동적으로 반환합니다. 따라서 처음에는 모든 대답이 페이지에로드되고 숨겨집니다. 데이터를 선택하고 반환하는 방법은 각 요소에 대해 각 요소에 대해 클래스를 제공하고 예 또는 아니요 여부를 지정하는 것입니다. class="q1_0 q2_1 q3_1 q4_0"과 같은 것입니다. 0은 아니요, 1은 예입니다. 이 문제를 해결하기위한 좋은 방법이라고 생각하거나 쉬운 선택이 될 것입니까? 요약하면, 나는 이것을 지원할 수있는 jQuery 플러그인을 다루는 사람이 있는지 알아보고자한다. 언제나처럼 도움을 주시면 대단히 감사하겠습니다.JS/jQuery - 사용자 입력을 기반으로 결과 표시

감사합니다,

-Josh

출처

2010-02-09 joshgillies

확인의 당신이 예/아니오 질문에 대한 사용자의 대답을 수 있도록 체크 박스를 사용한다고 가정하자. 또한 질문의 순서가 응답이 페이지에 배치 된 순서를 반영한다고 가정합니다. JQuery와 부분

<ul> 
    <li class="relevant_data">Hi, I'm quite relevant to question 1</li> 
    <li class="relevant_data">Hi, I'm quite relevant to question 2</li> 

.... 

<input type="checkbox" class="question"/> Are you hungry? 
<input type="checkbox" class="question"/> Are you thirsty?

없음 :

$questions = $('input.question'); 
$questions.bind('click', function() { 
    var pos = $questions.index(this), 
     item = $('ul li.relevant_data:eq('+pos+')'); 

    this.checked ? 
     item.hide() : item.show(); 
});

이 어떤 도움이 될 것입니다 희망 그럼 당신은 이런 식으로 뭔가를해야합니다.

출처

2010-02-09 23:59:10 aefxx

필자가 설명하는 것은 효과가있을 것이다. 물론 도움이 될만한 플러그인을 모르겠다. 그러나 그러한 접근 방식을 취하면 "q1 yes, q2 no"보다 더 복잡한 논리가 절대로 존재하지 않을 것이라는 것을 확신해야합니다. 예를 들어 질문의 표시 조건으로 "q1 yes, q2 yes 또는 q4 no"가 필요한 경우 구성표에서 처리 할 수 없으며 지저분한 해킹 또는 전체 시스템 다시 작성 중 하나를 수행합니다. .

나중에 복잡한 논리가 필요할 것으로 생각된다면 대신 순수 JS로 구현하는 것이 좋습니다. 그 (질문과 후 질문이 표시 여부할지 여부의 확인을 트리거 그들에 대한 onChange가 핸들러를 렌더링하는 플러스 논리) 같은

function isYes(i) { 
    return $("#question" + i).is(":checked"); 
} 
var question1 = ["Is red your favorite color?", function() { 
    return isYes(1); 
}]; 
var question2 = ["Are dogs your favorite pet?", function() { 
    return isYes(1) && (isNo(4) || isYes(7); 
}];

뭔가 : 예를 들어.

물론 배열을 사용하는 대신 "question"클래스를 만들고 각 질문마다 별도의 변수 대신 배열 객체를 원할 수도 있습니다. 그러나 이것은 간단한 예일뿐입니다. 어쨌든, 그런 접근 방식은 미래에 훨씬 더 많은 힘과 유연성을 줄 것입니다.하지만 그것은 또한 수업 기반 아이디어보다 더 많은 일이 될 것입니다.

출처

2010-02-10 00:05:43 machineghost

JS/jQuery - 사용자 입력을 기반으로 결과 표시

답변

관련 문제