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

一旦掌握了数组和索引，就不那么难了。看看：

引入了一个新变量：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

vec <- c("Protein1","Protein2", "CBSS-Protein 2", "5-FCL-like_protein")

向上/向下计数数组动画

2 个答案: