jQuery 질문 : 한 번에 하나의 필드 세트 만 볼 수 있도록 다중 부분 양식을 분해하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/611898

문제

나는 XHTML & CSS에 대한 확고한 이해를 가지고 있지만 PHP & JavaScript는 나에게 마술처럼 보입니다.

PHP 기반을 사용하여 토론 사이트를 작성하고 있습니다 TextPattern CMS. 사용자가 로그인하면 공개 측 양식을 사용하여 새로운 토론 주제를 추가 할 수 있습니다. HTML로 그룹화 된 입력 필드가 많이 있습니다. fieldset 단일 내의 요소 form 특정 데이터베이스 테이블에 새 행을 추가하는 요소. 내가하고 싶은 것은 한 번에 하나의 필드셋 만 표시하십시오, 삽입 이전 그리고 다음 사람들이 허용하는 링크 필드 사이를 탐색하십시오.

TextPattern은 jQuery와 함께 번들로 제공되며 이 기능을 설명하는 jQuery 플러그인. 그러나 나는 그것을 작동시킬 수 없습니다.

여기 내 문서에있는 것이 있습니다 head:

<style type="text/css" media="screen">
    fieldset {display: none;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script type="text/javascript" src="http://site.url/scripts/jquery.babysteps-0.2.1.js"></script>
<script type="text/javascript" language="javascript">
    $('#step1').bindStep('#step2');
    $('#step2').bindStep('#step3');

    $('#step1').show();
</script>

내 양식은 다음과 같습니다.

<fieldset id="step1">
    <legend>Step 1 Fields</legend>
    <!-- fields -->
</fieldset>
<fieldset id="step2">
    <legend>Step 2 Fields</legend>
    <!-- fields -->
</fieldset>
<fieldset id="step3">
    <legend>Step 3 Fields</legend>
    <!-- fields -->
</fieldset>
<input type="submit" value="Post this Article!" />

결과는 style 선언은 숨겨져 있습니다 모든 fieldset, 그러나 스크립트는 표시되지 않습니다 step1 조금도. 모든 파일 경로를 두 번 확인했으며 Google 버전 대신 로컬 jQuery 번들 링크를 사용하여 이것을 시도했지만 동일한 결과를 얻습니다.

이 작업을 수행 할 수 있다면 기뻐할 것입니다. 그러나 Babysteps 플러그인 없이이 작업을 달성 할 수있는 또 다른 방법이 있다면, 그 결과에도 만족할 것입니다.

당신이 제공 할 수있는 모든 지침이나 구체적인 조언은 대단히 감사 할 것입니다! 단계별 지침 또는 실제 문제 해결 질문 (컴퓨터가 연결되어 있습니까?)도 도움이 될 수 있습니다.

미리 감사드립니다!

도움이 되었습니까?

해결책

특정 플러그인은 확실하지 않지만 jQuery 만 있습니다.

$(function(){

    $('#gotoStep2').click(function(){
        $('#step1').hide();
        $('#step2').show();
        return false;
    });

});

당신이 가진 곳 

<input type="button" id="gotoStep2" value="next &raquo;"/>

내부 1 단계

그리고 당신의 CSS :

#step2, #step3 //etc
{
    display: none;
}

나는 당신이 모든 단계에 대해 이것을 반복하는 방법을 해결할 수 있다고 확신합니다 :)

다른 팁

<script type="text/javascript" language="javascript">
  $(function(){
    $("#step1").bindStep("#step2");
    $("#step2").bindStep("#step3");

    $("#step1").show();
  });
</script>

그래도 작동하지 않으면 플러그인을 버립니다. (진지하게, 그 페이지의 데모조차 작동하지 않습니다.)

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top