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関数を使用して、そのコードをもっとシンプルで読みやすくすることができます。私はあなたのためにそれをリファクタリングし、prev関数も作った。間違いなく、私のコードをさらに良くリファクタリングできるかもしれませんが、私はそれをあなたに任せます。

は、あなたが何かは私が知っていると私はそれを説明しますどのように動作するかを知りたい場合は、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