Question

我有一个按钮，在点击时迭代一个数组并显示数组的内容。当我到达数组的末尾时，我想将计数器设置回到开头。到目前为止，这是我的代码：

HTML：

<div id="likes">
<span class="figure">
</span>
</div>
<button type="button" id="like" >Like</button>

JavaScript的：

var clicks = 0; $("#like").click(function(){ clicks++; 
$('.figure').html(clicks);});

工作演示：http://jsfiddle.net/nTmu7/2/

Answer 1

使用提醒操作符（ AKA：模数）% 循环您的数组

counter = (counter+1) % array.length;

示例：

＆＃13;

var clicks = 0;
var array  = ["One", "Two", "Three"];
var tot    = array.length;   

$("#like").click(function(){
  $('.figure').html( array[clicks] );
  clicks = ++clicks % tot;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="likes">
    <span class="figure"></span>
</div>
<button type="button" id="like">LOOP ARRAY</button>

＆＃13;

总是很好重读： https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators

Answer 2

通过数组的大小来计算计数器。即I％array.length会让你回到0.如果我等于长度。我通常有一个if语句。

像

if(I == array.length){
    I %= array.length;
}

Answer 3

你可以简单地使用modulo（%）以数组的长度取模数可以保证你永远不会删除它：

var ind = 0;
var val = ['a', 'b', 'c'];

$("button").on('click', function() {
  ind = (ind + 1) % val.length; // or "ind++; ind %= val.length;"
  $(this).text(val[ind]);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>a</button>

如何在我的阵列结束时重置我的计数器？

3 个答案: