jquery - jquery中的箭头点击

Question

我有 2 个箭头，一个将计数器增加 1，左边一个减少它我要解决的问题是处理负数的良好逻辑（它应该转到列表中的最后一项），而在另一端，当计数器超过了它应该返回到 0 的最大项目数。

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

Answer 1

每当您增加时，请检查新值。如果它大于选项总数，请将其重置为零。如果它小于选项总数，请将其设置为最大值。否则，简单地+=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 2

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

(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 3

我发现使用 % 运算符不是最简单的方法。它只会在你根本不需要它的地方增加复杂性，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 的索引来获取元素。

Answer 4

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 mod 5 = 4。我的逻辑太长了，这是一种更简洁的方法。