jquery - jquery 使用 slice 显示基于 Clicks 的 Li's

Question

我有 3 个项目要一次显示。我一共有4个。如果用户点击左箭头，它应该通过从开始和结束中减去来将他们带回一个项目，如果他们点击右箭头，它应该添加到开始和结束。我的问题是，当我单击前进时，它不会在后退时增加或减少。这可能相当简单。这是我的代码。同样，除非我以错误的方式进行此操作，否则我希望我的开始索引和结束索引在您单击右箭头或左箭头时发生变化。 jsfiddle

$(function() {
    var backLi = 0;
    var forwardLi = 3;
      var end = forwardLi + 1;           

 if (end == $(".divsize ul li").length) end = undefined;
    $(".divsize ul li").css({"display" : "none"});
 if (end)   
    $(".divsize ul li").slice(backLi , forwardLi).addClass("showItem");


    $(".rightArr").click(function() {
        backLi = backLi + 1;
        forwardLi = forwardLi + 1;
        $('input.forward').val(backLi);
        $('input.backLi').val(forwardLi);     
    });     

    $(".leftArr").click(function(){
        backLi = backLi - 1;
        forwardLi = forwardLi - 1;
        $('input.forward').val(backLi);
        $('input.backLi').val(forwardLi);
    });
});

谢谢您的帮助。

Answer 1

阅读文档后，我不喜欢你的语法。看看这个 jQuery 代码是否解决了你的问题：

    var backLi = 0;
    var forwardLi = 2;
    $(".divsize ul li").slice(backLi , forwardLi);
    $(".rightArr").click(function() {
        console.log(backLi, forwardLi);
        backLi = backLi + 1;
        forwardLi = forwardLi + 1;
        $('input.forward').val(backLi);
        return false;
    })      
    $(".leftArr").click(function() {
        console.log(backLi, forwardLi);
        backLi = backLi - 1;
        forwardLi = forwardLi - 1;
        $('input.forward').val(backLi);
        return false;
    })

顺便说一句 - 你的代码中有 lefttArr （额外的't'）而不是 leftArr 。