使用Jquery在div中上下循环

Question

我需要同时在两组div中上下循环。这段代码可以很好地循环列表(button1)，但是当我试图创建一个向下按钮(button2)时，它会扰乱div顺序，并且不能正确地循环。我如何修改这段代码，使它成功地以正确的顺序在列表中上下循环？

null

$(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>

null

Answer 1

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

null

$(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>