jQuery - 특정 페이지에 요소가있을 때 숨기기

Question

나는 절대 위치 지정이있는 항목 <li>을 겹쳐서 <ul> 목록 항목으로 시뮬레이트 한 마법사 단계 폼을 가지고 있습니다. 나는 특정 단계에 다음 또는 이전 버튼을 숨길 것을 제외하고 원하는대로

마법사 양식 노력하고 있습니다.

이것은 jQuery의 제 논리이지만 좋은 결과는 아닙니다.

if (index === 0) { 
    $('#prev').addClass(invisible); 
    $('#prev').removeClass(visible); 
} else if (index === 1) { 
    $('#prev').addClass(visible); 
    $('#prev').removeClass(invisible); 
} else { 
    $('#next').addClass(invisible); 
} 

내가 가능한 한 많은 그것을 분리하려고 다음

var current; 
var index = 0; 

$(function() { 
    current = $('.pg-wrapper').find('.current'); 

$('#next').on('click', function() { 
    if (current.next().length===0) return; 

    current.next().addClass('current').show(); 
    current.removeClass('current').hide(); 

    navstep.next().addClass('active'); 
    navstep.removeClass('active'); 

    current = current.next(); 
    navstep = navstep.next(); 
    index = current.eq(); 
}); 

같은 현재 단계의 요소에 체인 내가 eq()을 사용하는 인덱스 값을 얻으려면하지만 내 전체 코드는 당신에게 더 나은 아이디어를 줄 것이다 . 당신이 도움을 걱정 것 경우 확인하십시오 내 나는 전체 코드를 못 봤어하지만 클래스 assignemnts는 같이 안 JS BIN

Answer 1

는 대신 인덱스의 .EQ 사용

1. 몇 가지 문제
   있었다
2. 당신은
3. 탐색 논리가
4. 에 두 개의 클래스를 가질 필요가 없습니다 결함이 있었다 클래스 이름 따옴표 누락 된 가시성 변경

다음과 같은 사항이 개선되었지만 문의 사항이 있으면 알려주세요.

나는 옆에있는 이전 /에 클래스 = "navBut"를 추가하고 당신은 4 수정을해야

Live Demo

var current; 
var navstep; 

$(function() { 
    current = $('.pg-wrapper').find('.current'); 
    navstep=$('.nav-step').find('.active'); 
    $('.pg-wrapper div').not(current).hide(); 
    setBut(current); 

    $('.navBut').on('click', function() { 
    var next = this.id=="next"; 
    if (next) { 
     if (current.next().length===0) return; 
     current.next().addClass('current').show(); 
     navstep.next().addClass('active'); 
    }  
    else { 
     if (current.prev().length===0) return; 
     current.prev().addClass('current').show(); 
     navstep.prev().addClass('active'); 
    } 
    current.removeClass('current').hide(); 
    navstep.removeClass('active'); 
    current = (next)?current.next():current.prev(); 
    navstep = (next)?navstep.next():navstep.prev(); 
    setBut(current); 
    }); 
}); 

function setBut(current) { 
    var index=current.index(); 
    var max = current.parent().children().length-1; 
    $('#prev').toggleClass("invisible",index<1); 
    $('#next').toggleClass("invisible",index>=max); 
} 

Answer 2

: 클래스 이름을 따옴표로

$('#prev').addClass('invisible'); 
$('#prev').removeClass('visible'); 

즉? 그리고 실제로 수업이 필요합니까 visible? invisible 클래스를 할당하고 제거하면 쉽게이 작업을 수행 할 수 있습니다 (이 클래스에 맞는 스타일이 설정되어 있으면).

Answer 3

eq 함수는 색인을 제공하지 않으므로 index() 함수를 사용해야합니다.

Answer 4

가시성의 설정을 다시 썼다.

1) .eq() 대신 .index()를 사용하십시오.

2) 클래스를 변경하는 changeIndex 함수를 추가하여 색인에 따라 다르며 이전 및 다음을 클릭하면 호출됩니다.

3) 로직의 버그가) 보이지 않는

4

볼에 따옴표를 추가, 3 단계로가는 시도하고 다시 1 단계로되어 있습니다. 두 버튼이 모두 사라집니다. http://jsfiddle.net/ChaitanyaMunipalle/9SzWB/

Answer 5

사용 지수() 함수 대신 EQ() EQ()는 객체와 인덱스를 (반환하기 때문에) 반환합니다 인덱스 여기 = 0

데모 경우 그래서 당신은 다음 버튼을 볼 수 있도록해야 정수 값

DEMO HERE

var current; 
var navstep; 
var index = 0; 

$(function() { 
    current = $('.pg-wrapper').find('.current'); 
    navstep=$('.nav-step').find('.active'); 
    $('.pg-wrapper div').not(current).hide(); 
}(jQuery)); 


$('#next').on('click', function() { 
    if (current.next().length===0) return; 
    current.next().addClass('current').show(); 

    current.removeClass('current').hide(); 

    navstep.next().addClass('active'); 
    navstep.removeClass('active'); 

current = current.next(); 
    navstep = navstep.next(); 
    index = current.index(); 
    change_step(index) 
}); 

$('#prev').on('click', function() { 
    if (current.prev().length===0) return; 
    current.prev().addClass('current').show(); 
    current.removeClass('current').hide(); 

    navstep.prev().addClass('active'); 
    navstep.removeClass('active'); 

    current = current.prev(); 
    navstep = navstep.prev(); 
    index = current.index(); 
    change_step(index) 
}); 

function change_step(value) 
{ 
    if (value === 0) { 
     $('#prev').hide(); 
     $('#next').show(); 
    } else if (value === 1) { 
     $('#prev').show(); 
     $('#next').show(); 
    } else { 
     $('#next').hide(); 
     $('#prev').show(); 
    } 
}