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的下一步和上一个按钮的工作

回答

相关问题