0

我无法解决这个问题，你能解决吗？我需要您关于如何在 JS vanilla 或 jQuery（可选）中执行此操作的专家建议。jsfiddle 上的代码示例将不胜感激。

我必须在一个列表中显示一个由 5 个元素组成的数组，一次限制为 3 个

var range = [0,1,2,3,4];

<ul>
  <li>0</li>
  <li>1</li>
  <li>2</li>
</ul>

<div id="prev">prev</div>
<div id="next">next</div>

当用户单击“下一步”时，我需要在第一个“li”上添加一个类“焦点”。

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

第二次点击“下一步”

<ul>
  <li>0</li>
  <li class="focus">1</li>
  <li>2</li>
</ul>

点击“下一步”...

<ul>
  <li>0</li>
  <li>1</li>
  <li class="focus">2</li>
</ul>

单击“下一步”...注意数组移位

<ul>
  <li>1</li>
  <li>2</li>
  <li class="focus">3</li>
</ul>

单击“下一步”...数组移位

<ul>
  <li>2</li>
  <li>3</li>
  <li class="focus">4</li>
</ul>

点击“下一个”...但我不能再进一步了，因为数组中没有要显示的元素，所以如果我点击“上一个”，我想要相反

点击“上一个”……</p> 

<ul>
  <li>2</li>
  <li class="focus">3</li>
  <li>4</li>
</ul>

点击“上一个”……</p> 

<ul>
  <li class="focus">2</li>
  <li>3</li>
  <li>4</li>
</ul>

点击“prev”……注意数组移位

<ul>
  <li class="focus">1</li>
  <li>2</li>
  <li>3</li>
</ul>

点击“prev”……注意数组移位

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

点击“prev”……什么也没发生，我们到达了开始去数组

<ul>
  <li class="focus">0</li>
  <li>1</li>
  <li>2</li>
</ul>

任何想法？提前致谢

答案中建议的修订解决方案

http://jsfiddle.net/QwATR/

4

3 回答 3

3 
// Initalize everything
var curPos = 0;
var minIndex = 0;
var maxIndex = 2;
var clicks = 0;
var range = ['0','1','2','3','4','5','6','7','8','9','10'];
if($('li.focus').length === 0)
{
    $('ul > li:eq(0)').addClass('focus');
    $('ul > li').each(function(index){
       $(this).text(range[index+curPos]);
    });
}

// Next click handler
$('#next').click(function(){
    if($('ul li').index($('li.focus')) < 2)
    {
        $('li.focus').removeClass('focus');
        if(curPos < 2)
            curPos++;
        else
        {
            clicks++;
        }
        $('ul > li:eq('+curPos+')').addClass('focus');
    } else {
       if(clicks < range.length -3)
           clicks++;
    }
    $('ul > li').each(function(index){
        $(this).text(range[index+clicks]);
    });
});

// Previous click handler
$('#prev').click(function(){
    if($('ul li').index($('li.focus')) > 0)
    {
        $('li.focus').removeClass('focus');
        if(curPos > 0)
            curPos--;
        else
        {
            clicks--;
        }
        $('ul > li:eq('+curPos+')').addClass('focus');
    } else {
        if(clicks > 0)
            clicks--;
    }
        $('ul > li').each(function(index){
            $(this).text(range[index+clicks]);
        });
    console.log('clicks after prev:' + clicks);
});

http://jsfiddle.net/QAsQj/2/

于 2013-08-11T00:01:09.997 回答
2 
$(function(){
    $("#next").click(function(){
        if($(".focus").length == 0){
            $("ul li:first-child").addClass("focus");
        }
        else{
            if($(".focus").is(":last-child")){
                $("ul li").each(function(){
                    var content = $(this).next("li").html();
                    $(this).empty().html(content);
                }
                $(".focus").html(/**WHATEVER YOUR NEXT CONTENT IS**/);
            }
            else{
                var active = $(".focus");
                $("ul li").removeClass("focus");
                active.next("li").addClass("focus");
            }
        }
    }
    );
    $("#prev").click(function(){
        if($(".focus").length == 0){
            break;
        }
        else{
            if($(".focus").is(":first-child")){
                $("ul li").each(function(){
                    var content = $(this).prev("li").html();
                    $(this).empty().html(content);
                }
                $(".focus").html(/**WHATEVER YOUR PREV CONTENT IS**/);
            }
            else{
                var active = $(".focus");
                $("ul li").removeClass("focus");
                active.prev("li").addClass("focus");
            }
        }
    }
    );
}
);
于 2013-08-11T00:06:23.660 回答
1

这在 vanilla javascript ( jsfiddle )中非常简单

var range = [0, 1, 2, 3, 4],
    lis = document.getElementsByTagName('li'),
    foc, offset = 0;
function next() {
    if (foc === undefined) {
        foc = 0;
    } else if (foc < lis.length - 1) {
        foc++;
    } else if (offset + foc < range.length - 1) {
        offset++;
    }
    rewriteList();
}
function previous() {
    if (foc === undefined) {
        foc = 0;
    } else if (foc > 0) {
        foc--;
    } else if (offset > 0) {
        offset--;
    }
    rewriteList();
}
function rewriteList() {
    for (var i = 0; i < lis.length; i++) {
        lis[i].innerHTML = range[i + offset];
        lis[i].className = i == foc ? 'focus' : '';
    }
}
document.getElementById('prev').onclick = previous;
document.getElementById('next').onclick = next;

或者，您可以使用构造函数（ jsfiddle）设置轮播

于 2013-08-13T18:53:03.630 回答