Отображение и скрытие кнопок «Далее» и «Назад» на основе отображаемых элементов с помощью jquery

0

Я пытаюсь отображать и скрывать кнопки "Далее" и "Пред" на основе отображаемых элементов, используя jquery. Если вы пытаетесь часто нажимать кнопки "Пред" и "Далее", он будет показывать только "6 7 8 9 10". Но, однако, код не работает во все времена.

Мой пример кода

var p;
for(i=0;i<=$('#myList li').size(); i++){        
    p=i*20;
    $('#myList li:lt(5)').animate({"margin-left":"-"+p+"px"},1000).delay(5000);        

}
var $lis = $("#myList li").hide();
$lis.slice(0, 5).show();
var size_li = $lis.length;
var x = 5,
    start = 0;
$('#next').click(function () {
    if (start + x < size_li) {
        $lis.slice(start, start + x).hide();
        start += x;
        $lis.slice(start, start + x).show();            
        // Confused here
        if(parseInt(start) == 10) {
            $('#next').css('display','none');
        }
    }
    showHideButtons()
});
$('#prev').click(function () {
    if (start - x >= 0) {
        $lis.slice(start, start + x).hide();
        start -= x;
        $lis.slice(start, start + x).show();
    }
    showHideButtons();
});
function showHideButtons(){
    if (start == 0){
        $('#next').show();
        $('#prev').hide();
    }else if (start + x > size_li){
        $('#next').hide();
        $('#prev').show();
    }else{
        $('#next').show();
        $('#prev').show();
    } 
}
showHideButtons()

Вот моя скрипка http://jsfiddle.net/W4Km8/661/

Любые идеи очень приветствуются.

  • 0
    В чем твоя проблема?
  • 0
    @Maurice Морис, пожалуйста, проверьте скрипку. Ты узнаешь. Если больше нет элементов для отображения, то кнопка Next должна быть скрыта.
Показать ещё 3 комментария
Теги:

2 ответа

0

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

var items_per_page = 5;

$(document).ready(function() { 

    init_list ();

});


function init_list() { // Initialize values and states for first time

    var size_list = $('#myList li').length;
    $('#myList').attr('data-size', size_list); // save total items in custom attribute
    $('#myList li:eq(0)').addClass('first_item_selected'); //first element of the list         
    $('#myList li').each(function() { // save position in custom attribute
      $( this ).attr('data-value', parseInt($(this).text()) - 1);
    });

    $('#prev').click(function() {
       var next_item_selected = parseInt($('.first_item_selected').attr('data-value')) - items_per_page;
        $('#myList li').removeClass('first_item_selected');
        $('#myList li:eq(' + next_item_selected + ')').addClass('first_item_selected');
        event_pagination(); // update buttons and li states
    });

    $('#next').click(function() {
        var next_item_selected = parseInt($('.first_item_selected').attr('data-value')) + items_per_page;
        $('#myList li').removeClass('first_item_selected');
        $('#myList li:eq(' + next_item_selected + ')').addClass('first_item_selected');
        event_pagination(); // update buttons and li states
    });

    event_pagination(); // update buttons and li states

}

function event_pagination() { // Update the buttons and li states with new position of the pagination
    if (($('.first_item_selected').attr('data-value') - items_per_page) > -1) {
        $('#prev').show();
    } else {
        $('#prev').hide();
    }

    if ($('#myList').attr('data-size') - $('.first_item_selected').attr('data-value' ) > items_per_page) {
        $('#next').show();
    } else {
        $('#next').hide();
    }


    $('#myList li').each(function() { // show-hide li from first element of pagination 
        var present_item = parseInt($( this ).attr('data-value'));
        var first_item = parseInt($('.first_item_selected').attr('data-value'));

        if (present_item < first_item) {
            $(this).hide();
        }  else {
            if  ((present_item) < (first_item + items_per_page)) {
                $(this).show();
            } else {
                $(this).hide();
            }
        }

    });

}

И моя ссылка JsFiddle: http://jsfiddle.net/dojoplus/W4Km8/679/

Поделиться
0

Вы можете использовать .show() и .hide() напрямую вместо .fadeIn("slow") и .fadeOut("slow").

var n = 0,
    g = 3; // grouping number
$(document).ready(function () {
    $("#prev").hide();
    $("li").each(function (index) {
        if (index >= g) {
            $(this).hide()
        }
    })
})
$("button").click(function (e) {
    if (e.target.id == "next") {
        if (n + 1 < $("li").size() / g) {
            n += 1;
            $("li").each(function (index) {
                if (index < n * g) {
                    $(this).fadeOut("slow")
                } else if (index >= n * g && index < (n + 1) * g) {
                    $(this).fadeIn("slow")
                }
            })
        }
        if (n + 1 >= $("li").size() / g) {
            $(this).fadeOut("slow")
        } else {
            $("#prev").fadeIn("slow")
        }
    } else if (e.target.id == "prev") {
        if (n > 0) {
            n -= 1;
            $("li").each(function (index) {
                if (index >= n * g && index < (n + 1) * g) {
                    $(this).fadeIn("slow")
                } else if (index >= (n + 1) * g) {
                    $(this).fadeOut("slow")
                }
            })
        }
        if (n == 0) {
            $(this).fadeOut("slow")
        } else {
            $("#next").fadeIn("slow")
        }
    }
})

http://jsfiddle.net/W4Km8/698/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню