Count up/down 数组动画

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

这是一个工作 fiddle。只需用位置定义一个新变量并上下计数即可。

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;
    }
  });
});

Count up/down 数组动画

Count up/down Array animation

html

javascript

arrays

jquery

counter