Question

我一直在努力让这件事情发挥作用，而且我真的很想找到我。我不太确定我迷失在哪里。

我有一个ul li输出一堆缩略图，一次显示12个。

我几乎让它工作但它仍然真的很麻烦。如果有人可以帮助那将是非常棒的。我想在点击下一个链接后显示prev链接，如果索引小于0则隐藏它，并根据索引是否大于li集合的长度隐藏或显示下一个链接。

每次点击链接时，他们需要增加正负12，以便设置scrollTo的下一个索引。

以下是我创建的演示：http://jsfiddle.net/jaredwilli/L9hns/

var t = { 
    num: 12,
    scroll: {to: {}, from: {}},
    init: function() {
        var li = $('.barthumbs li'),
            first = li.eq(0),
            index = $('li.active').index();

        console.log(index);

        $('#next').click(function(e) {
            t.scroll.to = t.link(index, '+');
            index += t.num;

            $('#bartender-thumbs').scrollTo($('#'+t.scroll.to), 500);

            //console.log(index);
            e.preventDefault();
        });

        $('#prev').click(function(e) {
            t.scroll.from = t.link(index, '-');
            index -= t.num;
            //console.log(t.scroll.from);
            //console.log(index);
            $('#bartender-thumbs').scrollTo($('#'+t.scroll.from), 500);
            e.preventDefault();

        });
        //console.log(index);
    },
    link: function(index, operator) {
        if (operator == '+') {
            index = index + t.num;
        } else if (operator == '-') {
            index = index - t.num;
        }
        console.log(index);
        var curr = $('li').eq(index);

        $('li').removeClass('active');
        curr.addClass('active');
        curr = $('.active').attr('id');
        //console.log(curr);

        if (index > 0) { $('#prev').show(); }
        if (curr == undefined) { $('#next').hide(); }

        return curr;
    }
};
t.init();

Answer 1

init: function() {
    var li = $('.barthumbs li'),
        total = li.length,
...
        t.scroll.to = t.link(index, total, '+');
...
        t.scroll.from = t.link(index, total, '-');
...
    if (index+12>total) { $('#next').hide(); }
    else { $('#next').show(); }

    if (index === 0) { $('#prev').hide(); }
    else { $('#prev').show(); }

这将使您的代码在逻辑上做正确的事情。但是，代码中的其他地方存在一个错误，即使在链接函数中调用$（'＃prev'）。show（），#prev也会消失。

Answer 2

感谢你的帮助@Mike

我想通了

这是我的工作代码和小提琴：http://jsfiddle.net/jaredwilli/L9hns/

var t = {
scroll: {to: {}, from: {}},
init: function() {
    var li = $('.barthumbs li'),
        total = li.length;
    $('li:eq(0)').addClass('active');
    var index = $('li.active').index();

    $('#next').click(function(e) {
        index = index+12;
        if (index > 0) {
            $('#prev').show();
        }
        t.scroll.to = t.link(index, total);
        $('#bartender-thumbs')
            .scrollTo($('#'+t.scroll.to), 500);
        e.preventDefault();
    });

    $('#prev').click(function(e) {
        index = index-12;
        if (index<total-12) {
            $('#next').show();
        }
        t.scroll.from = t.link(index, total);
        $('#bartender-thumbs')
            .scrollTo($('#'+t.scroll.from), 500);
        e.preventDefault();
    });
},
link: function(index, total, operator) {
    $('li').removeClass('active');

    var curr = $('li').eq(index);
    curr.addClass('active');
    curr = $('.active').attr('id');

    if (index + 12 > total) {
        $('#next').hide();
    }
    if (index <= 0) {
        $('#prev').hide();
    }
    return curr;
}

}; t.init（）;

我感谢你的帮助，过去一天这让我疯了！

使用next / prev链接问题滚动到每个第12个li元素

2 个答案: