Question

我认为对于拥有比我更多jQuery知识的人来说，这可能是一个简单的补充。但我有一个基于这段代码的导航：http://jsfiddle.net/JQq5n/508/

当前页面中的任何一个都将在li元素中具有一个“active”类（在此代码中为第4个li元素）。但是我想为：gt和：lt选择器设置零基础作为'active'元素。从本质上讲，无论您使用哪个页面，都会将其标题显示为第一个li元素，您可以点击“上一个”或“下一个”来获取之前或之后列出的内容。那有意义吗？

第2部分也只是显示“上一个”链接，如果实际上有一些事情要去。提前感谢您的帮助......

HTML：

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li class="active">4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
</ul>
<a class="prev">prev</a> | <a class="next">next</a>

jQuery的：

$('ul li:gt(4)').hide();

$('.prev').click(function() {
var first = $('ul').children('li:visible:first');
first.prevAll(':lt(5)').show();
first.prev().nextAll().hide()
});

$('.next').click(function() {
var last = $('ul').children('li:visible:last');
last.nextAll(':lt(5)').show();
last.next().prevAll().hide();
});

解决方案： http://jsfiddle.net/qrSAz

Answer 1

使用jQuery的slice(start [, end ] )而不是选择上一个和下一个元素

我个人更喜欢使用的课程不是show()和hide()。

基本理念：

var lis = $("li");
var index = lis.filter(".active").index();
var start = index-2;
var end = index+3;
lis.removeClass("show").slice(start,end).addClass("show");

添加其他逻辑：

检查开始和结束是否在范围内，如果没有填充左侧或右侧，则始终显示正确的数字。

function showRange() {

    var range = 4;
    var lis = $("#pages li");

    if (lis.length > range) {

        var activeIndex = lis.filter(".active").index();
        var liCount = lis.length - 1;

        var start = activeIndex - (range / 2);
        var end = activeIndex + (range / 2);

        if (start < 0) {
            end -= start;
            start = 0;
        } else if (end >= liCount) {
            start += liCount - end;
            end = liCount;
        }

        lis.filter(".show").removeClass("show");
        lis.slice(start, end + 1).addClass("show");

    }
}

工作示例：

JSFiddle

为：gt或：lt选择器设置变量零基数

1 个答案: