递增/递减数组动画

Question

我想在按左右箭头时使用数组创建一个上下计数动画。

我有 3 个数组，每个箭头将链接到一个 ID。

var KEY = {
  LEFT: 37,
  RIGHT:  39
}

$(function(){
  $(document).keydown(function(e){
    switch(e.which){
      case  KEY.RIGHT:
        // Arrays +1

      break;
      case  KEY.LEFT:
        // Arrays -1

      break;
    }
  });
});

var asiel = [0, 200, 300, 900, 1100, 2000];   

var nareiziger = [0, 200, 300, 900, 1100, 2000];   

var total = [0, 200, 2590, 9000, 11000, 23000];   

演示：codepen

我真的不知道如何处理它。

我该怎么做？

非常感谢您的帮助！

Answer 1

一旦你掌握了数组和索引的窍门，就不会那么难了。看看：

引入一个新变量：counter

每次用户点击左或右时，它都会获得一个新值。 测试索引是否在数组中。

在函数末尾使用array[index]反映计数器。

var KEY = {
  LEFT: 37,
  RIGHT:  39
}
var counter = 0;

$(function(){
  $(document).keydown(function(e){
    switch(e.which){
      case  KEY.RIGHT:
        // Arrays +1
        asiel.length == counter ? counter = asiel.length -1 : null;
        counter++;    
      break;
      case  KEY.LEFT:
        // Arrays -1
        counter--;
        0 > counter ? counter = 0 : null;
      break;
    }
    $("#asiel").text(asiel[counter]);
    $("#nareizigers").text(nareiziger[counter]);
    $("#total").text(total[counter]);
  });
});

var asiel = [0, 200, 300, 900, 1100, 2000];   

var nareiziger = [0, 200, 300, 900, 1100, 2000];   

var total = [0, 200, 2590, 9000, 11000, 23000];   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 data">
		<div class="row">
			<div class="col-sm-4">
				<div id="datum">
					<h1>Maart 2015</h1>
					
				</div>
			</div>
			
				
				<div class="col-sm-3">
					<div class="asiel">
						<h3 class="white-h3" >
							+ <span id="asiel">0</span>
						</h3>
						<div class="subtitel">
							Eerste asielzoekers
						</div>
					</div>
					<div class="eerste-asiel">
						<h3 class="white-h3" >
							+ <span id="nareizigers">127</span>
						</h3>
						<div class="subtitel">
							Nareizigers
						</div>
					</div>
				</div> <!-- // colomn-2 -->
				<div class="col-sm-4">
					<div class="asiel">
						<h3 class="white-h3" id="total">
							29.301
						</h3>
						<div class="subtitel">
							Totaal aantal syrische immigranten sinds januari 2013
						</div>
					</div>
				</div>
			
		</div>
	</div>

Answer 2

这是一个工作小提琴。只需使用该位置定义一个新变量并上下计数。

Working Fiddle

var KEY = {
  LEFT: 37,
  RIGHT:  39
}
var asiel = [0, 200, 300, 900, 1100, 2000];   

var nareiziger = [0, 200, 300, 900, 1100, 2000];   

var total = [0, 200, 2590, 9000, 11000, 23000];   

$(function(){
  let pos = 0
  changeVal()
  function changeVal(){
  $("#asiel").html(asiel[pos])
  $("#total").html(total[pos])
  $("#nareiziger").html(nareiziger[pos])
  }
  $(document).keydown(function(e){
    switch(e.which){
      case  KEY.RIGHT:

        pos < total.length ? pos += 1
        : pos = total.length

        changeVal()
        // Arrays +1

      break;
      case  KEY.LEFT:
        pos > 0 ?
        pos -= 1
        : pos = 0

        changeVal()
        // Arrays -1

      break;
    }
  });
});