使用 Jquery 在 div 中上下循环

问题描述

我需要同时在两组 div 中上下循环。此代码适用于向上循环列表（按钮 1），但是当我尝试创建向下按钮（按钮 2）时，它会弄乱 div 顺序并且无法正确循环。如何更改此代码以使其以正确的顺序在列表中成功上下循环？

$(document).ready(function() {
  var divs = $('div[id^="num-"]').hide(),i = 0;

  function cycleone() {
    divs.hide().eq(i).show();
    i = ++i % divs.length;
  };
  
  cycleone()
  
  $('#button1').click(function() {
    cycleone()
  })
});

$(document).ready(function() {
  var divsv = $('div[id^="numv-"]').hide(),iv = 0;

  function cycletwo() {
    divsv.hide().eq(iv).show();
    iv = ++iv % divsv.length;
  };

  cycletwo()
  
  $('#button1').click(function() {
    cycletwo()
  })
});

$(document).ready(function() {
  var divs = $('div[id^="num-"]').hide(),i = 0;

  function cycleonedown() {
    divs.hide().eq(i).show();
    i = --i % divs.length;
  };
  
  cycleonedown()
  
  $('#button2').click(function() {
    cycleonedown()
  })
});

$(document).ready(function() {
  var divsv = $('div[id^="numv-"]').hide(),iv = 0;

  function cycletwodown() {
    divsv.hide().eq(iv).show();
    iv = --iv % divsv.length;
  };

  cycletwodown()
  
  $('#button2').click(function() {
    cycletwodown()
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="num-1">1</div>
<div id="num-2">2</div>
<div id="num-3">3</div>
<div id="num-4">4</div>
<div id="num-5">5</div>
<div id="num-6">6</div>
<div id="num-7">7</div>

<div id="numv-1">A</div>
<div id="numv-2">B</div>
<div id="numv-3">C</div>
<div id="numv-4">D</div>
<div id="numv-5">E</div>
<div id="numv-6">F</div>
<div id="numv-7">G</div>

<button id="button1">Up</button>
<button id="button2">Down</button>

解决方法

正如我所看到的，您正在使用 jquery，请尝试下面的代码片段

$(document).ready(function(){
    var lettersArray=[];
    var step=1;
    var lastStep=parseInt($(document).find('.num').length);
    
    if($(document).find('.numv').length){
        $(document).find('.numv').each(function(){
            var letter=$(this).html();
            lettersArray.push(letter);
        });
    }
    
    showCycle=function(step){
        var stepLetter=lettersArray[step-1];
        $('#number').html(step);
        $('#letter').html(stepLetter);
    }
    $(document).on('click','#button1',function(){
        step=step+1;
        step=step > lastStep ? 1 : step;
        showCycle(step);
    });
    
    $(document).on('click','#button2',function(){
        step=step-1;
        step=step < 1 ? lastStep : step;
        showCycle(step);
    });
    
});

.num,.numv{
    display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

<div id="num-1"class="num">1</div>
<div id="num-2"class="num">2</div>
<div id="num-3"class="num">3</div>
<div id="num-4"class="num">4</div>
<div id="num-5"class="num">5</div>
<div id="num-6"class="num">6</div>
<div id="num-7"class="num">7</div>

<div id="numv-1"class="numv">A</div>
<div id="numv-2"class="numv">B</div>
<div id="numv-3"class="numv">C</div>
<div id="numv-4"class="numv">D</div>
<div id="numv-5"class="numv">E</div>
<div id="numv-6"class="numv">F</div>
<div id="numv-7"class="numv">G</div>

<div id="number">1</div>
<div id="letter">A</div>

<button id="button1">Up</button>
<button id="button2">Down</button>