jQuery的下一步和上一個按鈕的工作

我已經做了旁邊和prev按鈕功能。我需要讓這個當我點擊下一步按鈕會發生什麼，然後同樣的事情在前面的按鈕點擊時發生反轉。jQuery的下一步和上一個按鈕的工作

這裏我曾小提琴鏈接：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++; 
    }); 

});

請幫助我。

來源

2012-02-15 Mr.T.K

只要你知道'如果（$（ '＃' + A + '_' + C））'是保證始終truthy（對象）。你可能意味着'如果（$（「＃」 + A +「_」 + C）。長度）'這是隻有truthy如果有至少一個元素的選擇相匹配的。（應該是1，因爲它是一個id選擇器）。 – Paulpro 2012-02-15 05:58:08

這裏是純粹的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/

來源

2012-02-15 06:19:42 codef0rmer

太感謝你了..... – 2012-02-15 09:40:08

代碼可以使用一些不錯的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(); 
    } 
});

如果你想知道如何什麼工作只是讓我知道，我會解釋它。不要說我們沒有好:)

來源

2012-02-15 05:55:45

壩鎮不錯的工作 – anglimasS 2012-02-15 09:43:13

嘗試使用這個腳本，它要小得多，做所有

$(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

來源

2012-02-15 06:04:57

歡迎....... :) – 2012-02-15 10:38:27

jQuery的下一步和上一個按鈕的工作

回答

相關問題