个人中心
gpt4 book ai didi

javascript - 如何在按向上和向下按钮滚动时随时仅显示 div 列表框中的 5 项？

转载 作者：行者123 更新时间：2023-12-03 02:39:48 25 4
gpt4 key购买 nike

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

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

如果你们能帮助我完成这项任务，我将不胜感激。谢谢

(注意:如果我按向上按钮而不是向下按钮，它也应该随时显示 5 个项目，但这次不是从列表框的开头删除项目，而是应该继续添加)

这就是现在显示数据的方式:

enter image description here

但我想在选择器到达 test6 时呈现这样的数据:

enter image description here 

<script>

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

    function PopulateMyDivList()
    {  
        var listHTML = "";        
        var i=0;
        var container = document.getElementById("MyDivList");    
        for (var name in nameList)
        {
            listHTML = nameList[name] ;                   
            container.innerHTML += '<div id="item'+i+'">'+listHTML+'</div>';    
            i++;
        }    
        item0.style.backgroundImage= "url(./selector.png)";    
    }

    var counterUp=0;

    function Navi(a)
    {    
        if (a =="Up")
        {
            document.getElementById('item'+counterUp).style.backgroundImage= "url(none)";    
            counterUp=counterUp-1;    
            document.getElementById('item'+counterUp).style.backgroundImage= "url(./selector.png)";    
        }
        else if (a =="Down")
        {    
            document.getElementById('item'+counterUp).style.backgroundImage= "url(none)";
            counterUp++;
            document.getElementById('item'+counterUp).style.backgroundImage= "url(./selector.png)";    
        }
        else
        {
        }    
    }

    window.onload = function () {  
        PopulateMyDivList();
    }
</script>
</head>

<body>
    <br>
    <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>
</html>

最佳答案

您必须添加/删除一些项目才能执行此操作。

这是一个完整评论的演示。
我仅用背景颜色替换了背景图像。

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>

关于javascript - 如何在按向上和向下按钮滚动时随时仅显示 div 列表框中的 5 项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48373421/

25 4 0
文章推荐： javascript - 为 TextInput 提供自定义 Prop 并将其用于事件处理程序
文章推荐： flutter - 如何将 Dart 代码迁移到不可为空 (NNBD)？
文章推荐： android-studio - 在我的 Assets 上获取 "No file or variants found for asset"发现错误
文章推荐： javascript - KnockoutJs 绑定(bind)可变数量的控件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com