jquery中的箭头点击答案

【问题标题】：arrow clicks in jqueryjquery中的箭头点击
【发布时间】：2012-04-18 13:13:16
【问题描述】：

我有 2 个箭头，一个将计数器加 1，左边一个将其减当计数器超过最大项目数时结束，它应该返回 0。

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

【问题讨论】：

“-ve 号码”？这是说“消极”的可怕新方式吗？
@ThiefMaster 是的。性能提升了 62.5%。
@RoryMcCrossan：如果你算上通过文字惯例来应对严重滥用语言所花费的时间，那就不是......

【解决方案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 是必要的，因为负值的模运算符的行为在不同语言中是不一致的，并且它始终有效，因为您永远不会得到负值。

【讨论】：

【解决方案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

【讨论】：

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

【讨论】：

【解决方案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;
}

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

【讨论】：