如何在按住向上和向下按钮的同时滚动时随时在div列表框中仅显示5个项目？(How to display Only 5 items in div listbox at any time while sc

编程入门行业动态更新时间:2024-10-27 03:29:04

如何在按住向上和向下按钮的同时滚动时随时在div列表框中仅显示5个项目？(How to display Only 5 items in div listbox at any time while scrolling by pressing up and down buttons?)

我有一个从数组中填充的div列表框。目前列表框显示所有10个项目，我可以通过按下按钮向下滚动。

我想知道如何限制列表框在任何时候只显示5个项目。例如，在开始时它应该显示从test1到test5的项目，当选择器到达项目5（通过按下按钮）之后，该选择器应该停留在底部列表框并继续显示项目6并删除test1 ...

如果你们帮我实现这个任务，我将不胜感激。谢谢

（注意：如果我按下按钮而不是按下按钮，它应该同时显示5个项目，但这次不是从列表框的开始移除项目，而应该继续添加）

这是现在如何显示数据：

但是我想在选择器达到test6时显示这样的数据：

I have a div list box that is populated from an array. Currently the list box shows all 10 items and i can scroll down and up by pressing buttons.

I wonder how i can limit the list box to show only 5 items at any time.For example at start it should show items from test1 till test5 and when my selector reaches item 5(by pressing down button) after that selector should stays at bottom of list box and keep showing item 6 onward and removing test1...

I would appreciate if you guys help me achieve this task.Thanks

(Note:if i press up button instead of down button it should also show 5 items at any time but this time instead of removing items from start of list box it should keep adding)

This is how now shows the data now:

but i want to present data like this when selector reaches test6:

最满意答案

您必须添加/删除一些项目才能这样做。

这里有一个演示完整评论。我用背景色替换了背景图片。

var nameList =  ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];

var container = $("#MyDivList");
var maxItems = 5;
var nameList_last = nameList.length-1;
var counterUp = 0;


function Navi(a){
  
  if (a =="Up"){
    if(counterUp==0){
      return;
    }
    
    // Decrease counterUp.
    counterUp--;
    
    // If counterUp is zero or more, add the new item on top.
    if((counterUp)>=0){
    $('<div id="item'+counterUp+'">'+nameList[counterUp]+'</div>').insertBefore($("[id^='item']").first());
    }

    // If there is now more item than the maximum, remove the last.
    if($("[id^='item']").length>maxItems){
      $("[id^='item']").last().remove();
    }
    
  }else{
    if(counterUp==nameList_last){
      return;
    }
    
    // Remove the item on top of the list.
    $('#item'+counterUp).remove();
    
    // Last item index would be:
    var lastVisibleIndex = counterUp+maxItems;
    
    // If that item is possible, add it to the bottom of the list.
    if(lastVisibleIndex<=nameList_last){
      $('<div id="item'+lastVisibleIndex+'">'+nameList[lastVisibleIndex]+'</div>').insertAfter($("[id^='item']").last());;
    }

    // Decrease counterUp.
    counterUp++;
  }
  
  // Highlight the first item of the list.
  $("[id^='item']").css({"background-color":"#FFF"});
  $("[id^='item']").first().css({"background-color":"#FF4"});
}

$(window).on("load",function () { 
  for (i=0;i<nameList.length;i++){
    container.append('<div id="item'+i+'">'+nameList[i]+'</div>');
    if(i>=maxItems-1){
      break;
    }
  }
  $("[id^='item']").first().css({"background-color":"#FF4"});
}); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type=button onclick="Navi('Up');">Up </button><br>
<button type=button onclick="Navi('Down');">Down </button><br>

<div id="MyDivList" class="style_MyDivList">
  <div id="Total">10</div>
</div> 
  
 
 
 随意要求澄清。 ;）  
 
 
 - 编辑 -  
 
 好的，当光标处于可见项目的顶部或底部时，有5种可见的可能性使某种光标上下移动，并使项目在循环中循环...有点复杂...  
 我放弃了counterUp变量。 现在，这是重要的可见指标。 所以我用.data来存储并轻松获取它们。 我还用课堂来突出显示所选项目。 这也很容易实现。  
 其余的逻辑是完全一样的...  
 
 
  
  var nameList =  ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];

var container = $("#MyDivList");
var maxItems = 5;
var nameList_length = nameList.length;
var nameList_last = nameList.length-1;



function Navi(a){

  // Get the index of the currently hihlighted item.
  var current = $(".highlighted").index()-1;  // That is the index in the actually existing elements... Minus 1 because of #Total

  // Remove hightlighting.
  $(".item").removeClass("highlighted");

  // Visible indexes
  var first = parseInt($(".item").first().data("index"));
  var last = parseInt($(".item").last().data("index"));
  var toAdd;

  if (a =="Up"){

    // If the first item is highlighted.
    if(current==0){

      // Remove the item at the bottom of the list.
      $(".item").last().remove();

      // If the first item is the first of the array.
      if(first==0){
        toAdd = nameList_last;
      }else{
        toAdd = first-1;
      }
      // Add it to the top of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertBefore($(".item").first());

      // Highlight the first item of the list.
      $(".item").first().addClass("highlighted");

    }else{
      // Just highlight the previous item of the list.
      $(".item").eq(current-1).addClass("highlighted");
    }

    // If a == Down
  }else{

    // If the last item is highlighted.
    if(current>=maxItems-1){

      // If the last item is the last of the array.
      if(last==nameList_last){
        toAdd = 0;
      }else{
        toAdd = last+1;
      }

      // Remove the item on top of the list.
      $(".item").first().remove();

      // Add it to the bottom of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertAfter($(".item").last());

      // Highlight the last item of the list.
      $(".item").last().addClass("highlighted");

    }else{
      // Just highlight the next item of the list.
      $(".item").eq(current+1).addClass("highlighted");
    }
  }
}

$(window).on("load",function () { 
  for (i=0;i<nameList.length;i++){
    container.append('<div class="item" data-index="'+i+'">'+nameList[i]+'</div>');
    if(i>=maxItems-1){
      break;
    }
  }
  $(".item").first().addClass("highlighted");
}); 
  .highlighted{
  background-color:#FF4;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type=button onclick="Navi('Up');">Up </button><br>
<button type=button onclick="Navi('Down');">Down </button><br>

<div id="MyDivList" class="style_MyDivList">
  <div id="Total">10</div>
</div> 
  
 
 
 
 
 - 最后编辑 -  
 
 当突出显示在最后一个项目上并且用户点击“向下”时，要“重置”选择，或者当突出显示在第一项目上并且用户点击“向上”时将选择设置到底部列表， ...  
 这只是两个新增的条件。 您需要稍微修改初始加载函数以使其加载顶部项目或底部项目。  
 见下文。  
 
 
  
  var nameList =  ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];

var container = $("#MyDivList");
var maxItems = 5;
var nameList_length = nameList.length;
var nameList_last = nameList.length-1;



function Navi(a){

  // Get the index of the currently hihlighted item.
  var current = $(".highlighted").index()-1;  // That is the index in the actually existing elements... Minus 1 because of #Total

  // Remove hightlighting.
  $(".item").removeClass("highlighted");

  // Visible indexes
  var first = parseInt($(".item").first().data("index"));
  var last = parseInt($(".item").last().data("index"));
  var toAdd;

  if (a =="Up"){

    // If the first item is highlighted.
    if(current==0){
      
      // Load the bottom items.
      if(first==0){
        $(".item").remove();
        loadItems("bottom");
        return;
      }

      // Remove the item at the bottom of the list.
      $(".item").last().remove();

      // If the first item is the first of the array.
      if(first==0){
        toAdd = nameList_last;
      }else{
        toAdd = first-1;
      }
      // Add it to the top of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertBefore($(".item").first());

      // Highlight the first item of the list.
      $(".item").first().addClass("highlighted");

    }else{
      // Just highlight the previous item of the list.
      $(".item").eq(current-1).addClass("highlighted");
    }

    // If a == Down
  }else{

    // If the last item is highlighted.
    if(current>=maxItems-1){

      // Load the top items.
      if(last==nameList_last){
        $(".item").remove();
        loadItems("top");
        return;
      }
      
      // If the last item is the last of the array.
      if(last==nameList_last){
        toAdd = 0;
      }else{
        toAdd = last+1;
      }

      // Remove the item on top of the list.
      $(".item").first().remove();

      // Add it to the bottom of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertAfter($(".item").last());

      // Highlight the last item of the list.
      $(".item").last().addClass("highlighted");

    }else{
      // Just highlight the next item of the list.
      $(".item").eq(current+1).addClass("highlighted");
    }
  }
}

function loadItems(part){
  if(part=="top"){
    for (i=0;i<nameList_length;i++){
      container.append('<div class="item" data-index="'+i+'">'+nameList[i]+'</div>');
      if(i>=maxItems-1){
        break;
      }
    }
    $(".item").first().addClass("highlighted");
  }
  
  if(part=="bottom"){
    for (i=(nameList_length-maxItems);i<nameList_length;i++){
      container.append('<div class="item" data-index="'+i+'">'+nameList[i]+'</div>');
    }
    $(".item").last().addClass("highlighted");
  }
}

$(window).on("load",function () { 
  loadItems("top");
}); 
  .highlighted{
  background-color:#FF4;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type=button onclick="Navi('Up');">Up </button><br>
<button type=button onclick="Navi('Down');">Down </button><br>

<div id="MyDivList" class="style_MyDivList">
  <div id="Total">10</div>
</div> 
  
 
You have to add/remove some items to do so. 
Here is a demo fully commented. I replaced the background image with just a background color. 
 
 
  
  var nameList =  ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];

var container = $("#MyDivList");
var maxItems = 5;
var nameList_last = nameList.length-1;
var counterUp = 0;


function Navi(a){
  
  if (a =="Up"){
    if(counterUp==0){
      return;
    }
    
    // Decrease counterUp.
    counterUp--;
    
    // If counterUp is zero or more, add the new item on top.
    if((counterUp)>=0){
    $('<div id="item'+counterUp+'">'+nameList[counterUp]+'</div>').insertBefore($("[id^='item']").first());
    }

    // If there is now more item than the maximum, remove the last.
    if($("[id^='item']").length>maxItems){
      $("[id^='item']").last().remove();
    }
    
  }else{
    if(counterUp==nameList_last){
      return;
    }
    
    // Remove the item on top of the list.
    $('#item'+counterUp).remove();
    
    // Last item index would be:
    var lastVisibleIndex = counterUp+maxItems;
    
    // If that item is possible, add it to the bottom of the list.
    if(lastVisibleIndex<=nameList_last){
      $('<div id="item'+lastVisibleIndex+'">'+nameList[lastVisibleIndex]+'</div>').insertAfter($("[id^='item']").last());;
    }

    // Decrease counterUp.
    counterUp++;
  }
  
  // Highlight the first item of the list.
  $("[id^='item']").css({"background-color":"#FFF"});
  $("[id^='item']").first().css({"background-color":"#FF4"});
}

$(window).on("load",function () { 
  for (i=0;i<nameList.length;i++){
    container.append('<div id="item'+i+'">'+nameList[i]+'</div>');
    if(i>=maxItems-1){
      break;
    }
  }
  $("[id^='item']").first().css({"background-color":"#FF4"});
}); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type=button onclick="Navi('Up');">Up </button><br>
<button type=button onclick="Navi('Down');">Down </button><br>

<div id="MyDivList" class="style_MyDivList">
  <div id="Total">10</div>
</div> 
  
 
 
Feel free to ask for clarifications. ;) 
 
 
--EDIT-- 
 
Okay, to have some kind of a cursor moving up and down in the 5 visible possibilities and have the items cycling in loop when the cursor is at top or bottom of the visible items is a bit more complicated... 
I dropped the counterUp variable. Now, that is the visible indexes that matters. So I used .data to store and easily get them. I also used a class to highlight the selected item. That is easy to target too. 
The rest of the logic is quite the same... 
 
 
  
  var nameList =  ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];

var container = $("#MyDivList");
var maxItems = 5;
var nameList_length = nameList.length;
var nameList_last = nameList.length-1;



function Navi(a){

  // Get the index of the currently hihlighted item.
  var current = $(".highlighted").index()-1;  // That is the index in the actually existing elements... Minus 1 because of #Total

  // Remove hightlighting.
  $(".item").removeClass("highlighted");

  // Visible indexes
  var first = parseInt($(".item").first().data("index"));
  var last = parseInt($(".item").last().data("index"));
  var toAdd;

  if (a =="Up"){

    // If the first item is highlighted.
    if(current==0){

      // Remove the item at the bottom of the list.
      $(".item").last().remove();

      // If the first item is the first of the array.
      if(first==0){
        toAdd = nameList_last;
      }else{
        toAdd = first-1;
      }
      // Add it to the top of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertBefore($(".item").first());

      // Highlight the first item of the list.
      $(".item").first().addClass("highlighted");

    }else{
      // Just highlight the previous item of the list.
      $(".item").eq(current-1).addClass("highlighted");
    }

    // If a == Down
  }else{

    // If the last item is highlighted.
    if(current>=maxItems-1){

      // If the last item is the last of the array.
      if(last==nameList_last){
        toAdd = 0;
      }else{
        toAdd = last+1;
      }

      // Remove the item on top of the list.
      $(".item").first().remove();

      // Add it to the bottom of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertAfter($(".item").last());

      // Highlight the last item of the list.
      $(".item").last().addClass("highlighted");

    }else{
      // Just highlight the next item of the list.
      $(".item").eq(current+1).addClass("highlighted");
    }
  }
}

$(window).on("load",function () { 
  for (i=0;i<nameList.length;i++){
    container.append('<div class="item" data-index="'+i+'">'+nameList[i]+'</div>');
    if(i>=maxItems-1){
      break;
    }
  }
  $(".item").first().addClass("highlighted");
}); 
  .highlighted{
  background-color:#FF4;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type=button onclick="Navi('Up');">Up </button><br>
<button type=button onclick="Navi('Down');">Down </button><br>

<div id="MyDivList" class="style_MyDivList">
  <div id="Total">10</div>
</div> 
  
 
 
 
 
--LAST EDIT-- 
 
To "reset" the selections when the highlighting is on the last item and the user click on "Down"... or to set the selection to the bottom list when the highlight is on the first item and the user clicks on "Up"... 
That is just two new conditions to add. You need to slightly modify the initial load function to make it load the top items or the bottom items. 
See below. 
 
 
  
  var nameList =  ["test1", "test2", "test3","test4","test5","test6","test7","test8","test9","test10"];

var container = $("#MyDivList");
var maxItems = 5;
var nameList_length = nameList.length;
var nameList_last = nameList.length-1;



function Navi(a){

  // Get the index of the currently hihlighted item.
  var current = $(".highlighted").index()-1;  // That is the index in the actually existing elements... Minus 1 because of #Total

  // Remove hightlighting.
  $(".item").removeClass("highlighted");

  // Visible indexes
  var first = parseInt($(".item").first().data("index"));
  var last = parseInt($(".item").last().data("index"));
  var toAdd;

  if (a =="Up"){

    // If the first item is highlighted.
    if(current==0){
      
      // Load the bottom items.
      if(first==0){
        $(".item").remove();
        loadItems("bottom");
        return;
      }

      // Remove the item at the bottom of the list.
      $(".item").last().remove();

      // If the first item is the first of the array.
      if(first==0){
        toAdd = nameList_last;
      }else{
        toAdd = first-1;
      }
      // Add it to the top of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertBefore($(".item").first());

      // Highlight the first item of the list.
      $(".item").first().addClass("highlighted");

    }else{
      // Just highlight the previous item of the list.
      $(".item").eq(current-1).addClass("highlighted");
    }

    // If a == Down
  }else{

    // If the last item is highlighted.
    if(current>=maxItems-1){

      // Load the top items.
      if(last==nameList_last){
        $(".item").remove();
        loadItems("top");
        return;
      }
      
      // If the last item is the last of the array.
      if(last==nameList_last){
        toAdd = 0;
      }else{
        toAdd = last+1;
      }

      // Remove the item on top of the list.
      $(".item").first().remove();

      // Add it to the bottom of the list.
      $('<div class="item" data-index="'+toAdd+'">'+nameList[toAdd]+'</div>').insertAfter($(".item").last());

      // Highlight the last item of the list.
      $(".item").last().addClass("highlighted");

    }else{
      // Just highlight the next item of the list.
      $(".item").eq(current+1).addClass("highlighted");
    }
  }
}

function loadItems(part){
  if(part=="top"){
    for (i=0;i<nameList_length;i++){
      container.append('<div class="item" data-index="'+i+'">'+nameList[i]+'</div>');
      if(i>=maxItems-1){
        break;
      }
    }
    $(".item").first().addClass("highlighted");
  }
  
  if(part=="bottom"){
    for (i=(nameList_length-maxItems);i<nameList_length;i++){
      container.append('<div class="item" data-index="'+i+'">'+nameList[i]+'</div>');
    }
    $(".item").last().addClass("highlighted");
  }
}

$(window).on("load",function () { 
  loadItems("top");
}); 
  .highlighted{
  background-color:#FF4;
} 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button type=button onclick="Navi('Up');">Up </button><br>
<button type=button onclick="Navi('Down');">Down </button><br>

<div id="MyDivList" class="style_MyDivList">
  <div id="Total">10</div>
</div>