Jquery使用切片显示基于Clicks的Li

时间:2013-05-07 14:47:09

标签: jquery click slice

我想要一次显示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);
    });
});

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

阅读完文档后,我不喜欢你的语法。看看这个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;
    })

btw - 你的代码中有lefttArr(额外的't')而不是leftArr。