无法使用“上一个”和“下一个”箭头对数组进行切片

Not able to slice the array using `prev` and `next` arrow

本文关键字：下一个 上一个 切片 数组      更新时间：2023-09-26

我有一个数组值，需要切片并显示在网页中。 我有prev和next箭头，根据数组导航，我正在对数组值进行切片。 当我使用箭头时next这是有效的。 但不适用于prev数组。

从逻辑上讲，我在这里犯了一些错误。 同样，当next或prev超过数组长度或小于数组长度时，我正在应用opacity并禁用该按钮。

有人在这里纠正我的错误吗？

这是我的代码：

var num = 0;
  var myArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
  var batch = 5;
  var value = 0;
  
  var showArray = function (num) {
    
    var required = myArray.slice(value, (batch+value));
    console.log(required, num);
    
    value += 5;
    
  }
  
  showArray(0);
  
  function add(amount) {
    num = (num + myArray.length - batch + amount) % myArray.length + batch;
    showArray(num);
  }
 $('#next-arrow').click(function(e){
   
   if(value >= myArray.length) {
     $(e.target).css({ opacity:0.5 });
     return
   }
   $(e.target).css({ opacity:1});
   add(batch)
   
   
 }); 
 $('#prev-arrow').click(function(e){
   
   if(value <= myArray.length) {
     $(e.target).css({ opacity:0.5 });
     return
   }
   
   $(e.target).css({ opacity:1});
   add(-batch)
   
 });
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="container">
      
      <a href="#" id="prev-arrow">Previous</a>
      <a href="#" id="next-arrow">Next</a>
      
    </div>

请尝试这个

$(document).ready(function(){
    var num = 0;
  var myArray = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13"];
  var batch = 5;
  var nextIndex = 0;
  var prevIndex = 0;
  var showArray = function (boolShowPrev) {
        var required;
        if(boolShowPrev){
            console.log("==",nextIndex, nextIndex+batch);
            required = myArray.slice(nextIndex, nextIndex+batch);    
            console.log(required)
            nextIndex += 5; 
            prevIndex -= 5;
         }else{
            if(nextIndex >= myArray.length){
                prevIndex=batch- (nextIndex-myArray.length);
                required = myArray.slice(-prevIndex);
                console.log(required);
                nextIndex -= 5; 
            }else{
                console.log("prev",-batch-prevIndex,-prevIndex)    
                required = myArray.slice(-batch-prevIndex,-prevIndex);
                console.log(required);
                prevIndex +=batch;
                nextIndex -= 5;
            }

        }

  }
  showArray(true);
 $('#next-arrow').click(function(e){
   if(nextIndex >= myArray.length) {
     $(e.target).css({ opacity:0.5 });
     return
   }
   $(e.target).css({ opacity:1});
   showArray(true)

 }); 
 $('#prev-arrow').click(function(e){
   if(prevIndex >= myArray.length) {
     $(e.target).css({ opacity:0.5 });
     return
   }
   $(e.target).css({ opacity:1});
   showArray(false)
 });
})

请参考这个 普伦克

相关文章：