jQuery простая разбивка на страницы

Question

У меня есть несколько ul, и я хочу показывать только по одному с предыдущей и следующей кнопками, чтобы перебирать их.

Я использую foreach с PHP для генерации каждой ul с максимум 6 литами. А также для получения уникального идентификатора для каждого (itemX).

<ul class="itemWrap" id="itemX"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    // ETC 
</ul> 

Я хочу использовать JQuery, чтобы установить все «itemWrap» для отображения ни, а затем установить идентификатор «ITEM1», чтобы отобразить блок на странице загрузки.

Затем при нажатии кнопок next/prev текущая ul отображает значение none и устанавливает следующий/prev ul для отображения блока.

jQuery(document).ready(function(){ 
jQuery(".itemWrap").css("display", "none"); 
jQuery("#item1").css("display", "block"); 

var count = 1; 
var item = jQuery("#item" + count); 

jQuery(".prev").click(function(){ 
    // do previous tab 

    jQuery.each(item, function() { 
     item.css("display", "none"); 
    }); 

    count--; 

    jQuery.each(item, function() { 
     item.css("display", "block"); 
    }); 
}); 

jQuery(".next").click(function(){ 
    // do next tab 

    jQuery.each(item, function() { 
     item.css("display", "none"); 
    }); 

    count++; 

    jQuery.each(item, function() { 
     item.css("display", "block"); 
    }); 
});}); 

Это то, что у меня есть, он работает, чтобы установить текущее ул чтобы отобразить ни один, но только если нет ничего говорю это, чтобы установить следующую/предыдущую ул, чтобы отобразить блок.

Answer 1

Пожалуйста, смотрите, если это поможет вам. вот ваш Javascript

$(document).ready(function(){ 

$("#item1").addClass("active"); 

$(".prev").click(function(){ 
    // do previous tab 
    var $el = $(".active").prev(".itemWrap"); 
    if($el.length){ 
     $(".itemWrap").each(function() { 
      $(this).removeClass("active"); 
     }); 
     $el.addClass("active"); 
    } 

}); 

$(".next").click(function(){ 
    // do next tab 
    var $el = $(".active").next(".itemWrap"); 
    if($el.length){ 
    $(".itemWrap").each(function() { 
     $(this).removeClass("active"); 
    }); 
    $el.addClass("active"); 
    } 
}); 

}); 

и вот ваш CSS

.itemWrap 
{ 
display:none; 
} 
.itemWrap.active 
{ 
display:block; 
} 

вот fiddle

Answer 2

Я думаю, вы должны использовать состояние DOM вместо Js переменных, чтобы определить, что скрывать или показывать следующий. Таким образом вы избежите глобальных переменных и используете состояние DOM для определения поведения. Вот некоторые быстрый код (требуется проверки границ и некоторые улучшения, но это поможет вам начать):

$(document).ready(function(){ 
    $(".itemWrap").hide(); 
    $("#item1").show(); 
    $("#prev").click(function(){ 
     var currentVisible = $(".itemWrap:visible"); 
     currentVisible.hide(); 
     currentVisible.prev(".itemWrap").show(); 
    }); 

    $("#next").click(function(){ 
     var currentVisible = $(".itemWrap:visible"); 
     currentVisible.hide(); 
     currentVisible.next(".itemWrap").show(); 
    }); 
}); 

Вот рабочая скрипку, если вы хотите попробовать: http://jsfiddle.net/jj5q441o/4/

Answer 3

Или вы можете использовать мой плагин jquery.

$(document).ready(function{ 
function loadPaging_content(offset_data){ 
    var offset;//default value page button 
    if(offset_data){ 
     offset = offset_data; 
    }else{ 
     offset = 0; 
    } 
    var items = 10;//example 
    $('your LoadPage selector(In this div load Page)').xhrPagination({ 
     sel: 'selector',//In this div created paging Links 
     totalCount: 'selector OR Number', 
     items: items 
     }, 
     { 
      url:'//your URL', 
      dataLP:{offset: offset, items:items} 
     } 
    ); 
} 
}); 

Вот ссылка: https://github.com/WadimMakarenko/jquery-simple_ajax