Jquery 다음 및 이전 단추 작업

Question

다음 및 이전 단추 기능을 수행했습니다. 나는 다음 버튼을 클릭 할 때 어떤 일이 일어나도록해야하며, 이전 버튼을 클릭했을 때 같은 일이 반대로 일어날 수 있도록해야합니다.

여기에 내가 일한 바이올린 링크 : http://jsfiddle.net/thilakar/t8v5P/

$(function() { 
    //var a = '.mainList'; 
    var a = 0; 
    var b = 2; 
    $('#next').click(function() { 
     var x = 0; 
     var z = $('.mainList').length; 
     $('.mainList').each(function() { 
      if(a == x){ 
       var inner_li = $('#'+a+' ul li').length; 
       for(c=1; c<=inner_li; c++){ 
        if (c == b) { 
         if ($('#'+a+'_'+c)) { 
          $('#'+a+'_'+c).show(); 
         } 
        } else { 
          $('#'+a+'_'+c).hide(); 
        } 
        if(b > inner_li) { 
         if (x < z-1) { 
          $('#'+a).hide(); 
          a++; 
          $('#'+a).show(); 
          b=1; 
         } 
        } 
       } 
      } 
      x++; 
     }); 
     b++; 
    }); 

}); 

저를 도와주세요.

Answer 1

에 있습니다주는 순수 jQuery를에 솔루션입니다,이 스크립트를 사용해보십시오 방법.

$('#next').click(function() { 
     var activeLiId = $('li.mainList:visible').attr('id'); 

     if ($('li#'+activeLiId+' > ul > li:visible').next().length == 1) { 
      $('li#'+activeLiId+' > ul > li:visible').hide().next().show(); 
     } else if ($('li.mainList:visible').next().length == 1) { 
      $('li.mainList:visible').hide().next().show().find('ul > li:first').show(); 
     } 

     if ($('li.mainList:visible').next().length == 0 
      && $('li.mainList:visible').find('ul > li:visible').next().length == 0 
     ) { 
      $(this).attr('disabled', true); 
     } else { 
      $('#prev').attr('disabled', false); 
     } 
    }); 

    $('#prev').click(function() { 
     var activeLiId = $('li.mainList:visible').attr('id'); 

     if ($('li#'+activeLiId+' > ul > li:visible').prev().length == 1) { 
      $('li#'+activeLiId+' > ul > li:visible').hide().prev().show(); 
     } else if ($('li.mainList:visible').prev().length == 1) { 
      $('li.mainList:visible').hide().prev().show().find('ul > li:last').show(); 
     } 

     if ($('li.mainList:visible').prev().length == 0 
      && $('li.mainList:visible').find('ul > li:visible').prev().length == 0 
     ) { 
      $(this).attr('disabled', true); 
     } else { 
      $('#next').attr('disabled', false); 
     } 
    }).attr('disabled', true); 

데모 : 당신은`그냥 알다시피 http://jsfiddle.net/t8v5P/6/

Answer 2

멋진 jQuery 함수를 사용하여 코드를 더 간단하고 읽기 쉽게 만들 수 있습니다. 나는 당신을 위해 그것을 리팩토링했고, 이전의 기능도 만들었습니다. 의심의 여지없이 내 코드가 더 잘 리팩터링 될 수는 있지만, 그 코드는 여러분에게 맡길 것입니다.

는 아무것도 그냥 알려 작동하고 나는 그것을 설명 할 것이다 방법을 알고 싶다면이 http://jsfiddle.net/t8v5P/5/

$('#next').click(function() { 
    var active_item = $('#slideShow').find('li.slideshow_item:visible'); 

    if (active_item.is(':last-child')) { 
     var active_main = active_item.closest('.mainList'); 

     if (active_main.is(':last-child')) return; 

     active_item.hide(); 
     active_main 
      .hide() 
      .next() 
       .show() 
       .find('li.slideshow_item:first').show(); 
    } 
    else { 
     active_item.hide(); 
     active_item.next().show(); 
    } 
}); 

$('#prev').click(function() { 
    var active_item = $('#slideShow').find('li.slideshow_item:visible'); 

    if (active_item.is(':first-child')) { 
     var active_main = active_item.closest('.mainList'); 

     if (active_main.is(':first-child')) return;    

     active_item.hide(); 
     active_main 
      .hide() 
      .prev() 
       .show() 
       .find('li.slideshow_item:last').show(); 
    } 
    else { 
     active_item.hide(); 
     active_item.prev().show(); 
    } 
}); 

에서 살고 참조하십시오. 우리가있어 말하지 말라하지 좋은 :)

Answer 3

훨씬 작은 모든

$(document).ready(function(e) { 
    var allMenifest = $(".mainList ul li"); 
    var init = 0; 

    $("#prev").click(function(e) { 
     showme("prev"); 
    }); 

    $("#next").click(function(e) { 
     showme("next"); 
    }); 


    function showme(e){ 
     allMenifest.eq(init).parent("ul").parent(".mainList").hide(); 
     allMenifest.eq(init).hide(); 

     if(e == "next"){ 
      init++;  
      }else{ 
      init--; 
      } 

      if(init <= 0){init = allMenifest.length;}else if(init >= allMenifest.length){init = 0;} 

      allMenifest.eq(init).parent("ul").parent(".mainList").show(); 
      allMenifest.eq(init).show(); 
    } 

}); 

작업을 예를 여기 JSFiddle