箭头点击jquery

Question

我有2个箭头一个增加一个计数器1和左侧减少它我想解决的问题是处理负数的好逻辑（它应该去列表中的最后一个项目）而在另一端当计数器超过最大数量时，它应该返回到0.

我正在寻找一些很好的逻辑来实现这一点。

Answer 1

您可以对此使用模运算符：

(num + total) % total 

如果你想1..total代替0..total-1，使用((num + total) % total) + 1

所以（伪）代码看起来是这样的：

function inc() { 
    num = (num + 1 + total) % total; 
} 

function dec() { 
    num = (num - 1 + total) % total; 
} 

的+total是必要的，因为模数运算符对负值的行为在各种语言之间并不一致，并且这种方式始终有效，因为您永远不会得到负值。

Answer 2

任何时候你增加，检查新的值。如果它大于选项总数，请将其重置为零。如果它小于选项总数，请将其设置为最大值。否则，只需+=1或-=1。

例如：

var total = 5, 
    currentNumber = 0, 
    numContainer = $("#number"); 

$(".up, .down").on("click", function(){ 
    currentNumber = parseInt(numContainer.text(), 10); 
    if ($(this).hasClass("up")) { 
    if (++currentNumber > total) currentNumber = 1; 
    } 
    if ($(this).hasClass("down")) { 
    if (--currentNumber < 1) currentNumber = total; 
    } 
    numContainer.text(currentNumber); 
}); 

这可以进一步减少对使用三元运算以及劈短路一起操作的功能性：

var t = 5, c = 0, n = $("#number"); 

$(".up, .down").on("click", function(){ 
    c = parseInt(n.text(), 10); 
    $(this).hasClass("up") ? (++c > t) && (c = 1) : (--c < 1) && (c = t); 
    n.text(c); 
}); 

演示：http://jsbin.com/egifas/edit#javascript,live

Answer 3

Theifmaster是正确的，几乎没有自己

var num = 0; 
var total = 5; 
if (direction == 'left') { 
num = (num - 1 + total) % total; 
} 

if (direction == 'right') { 
num = (num + 1 + total) % total; 
alert(num); 

} 

所以如果你点击我的例子中，左箭头应该是-1，但是这使得4国防部5 = 4，我的逻辑是太长这是一个更好的方法来做到这一点。

Answer 4

我没有找到使用％运算符作为最简单的方法。这只会增加你根本不需要它的复杂性，imo。但是，我没有告诉它是错的。

所以，简单的方法。 所有你需要的是幻灯片的总数（或者你拥有的任何元素/对象）。 您的这两种方法可以是这样的：

var counter = 0; 
var total = 7; // u will need to set this to your own totalCount value. 

function incrementCounter() 
{ 
    counter = (counter < total - 1) ? counter + 1 : 0; 
} 


function decrementCounter() 
{ 
    counter = (counter > 1) ? counter - 1 : total; 
} 

请不，这段代码实际上什么也不做。它甚至不检查数据的有效性（即如果全局变量被设置，如果总数实际上大于零等）。 无论如何，基于此妳可以使用这个计数器变量显示一些内容，或移动图像或你在那里做什么。另外，您可能想要将其更改为基于零索引。如果你在那里玩JS数组，那么这将非常有用，所以你不需要在索引上获得+/- 1来获取元素。