カウントアップ/ダウン配列アニメーション

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]; 

DEMO：codepen

私は実際にそれをプロセスへする方法がわかりません。

どうすればよいですか？

お世話になりました。

Answer 1

worklingフィドルです。 positonで新しい変数を定義し、それを上下に数えるだけです。

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

Answer 2

アレイとインデックスのハングアップが発生すると、あまり難しくありません。見てみましょう：それは新しい値に、ユーザーが左または右に当たるたびに取得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"> 
 
\t \t <div class="row"> 
 
\t \t \t <div class="col-sm-4"> 
 
\t \t \t \t <div id="datum"> 
 
\t \t \t \t \t <h1>Maart 2015</h1> 
 
\t \t \t \t \t 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t \t 
 
\t \t \t \t <div class="col-sm-3"> 
 
\t \t \t \t \t <div class="asiel"> 
 
\t \t \t \t \t \t <h3 class="white-h3" > 
 
\t \t \t \t \t \t \t + <span id="asiel">0</span> 
 
\t \t \t \t \t \t </h3> 
 
\t \t \t \t \t \t <div class="subtitel"> 
 
\t \t \t \t \t \t \t Eerste asielzoekers 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="eerste-asiel"> 
 
\t \t \t \t \t \t <h3 class="white-h3" > 
 
\t \t \t \t \t \t \t + <span id="nareizigers">127</span> 
 
\t \t \t \t \t \t </h3> 
 
\t \t \t \t \t \t <div class="subtitel"> 
 
\t \t \t \t \t \t \t Nareizigers 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> <!-- // colomn-2 --> 
 
\t \t \t \t <div class="col-sm-4"> 
 
\t \t \t \t \t <div class="asiel"> 
 
\t \t \t \t \t \t <h3 class="white-h3" id="total"> 
 
\t \t \t \t \t \t \t 29.301 
 
\t \t \t \t \t \t </h3> 
 
\t \t \t \t \t \t <div class="subtitel"> 
 
\t \t \t \t \t \t \t Totaal aantal syrische immigranten sinds januari 2013 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t 
 
\t \t </div> 
 
\t </div>