简单if语句不按预期工作

Question

我试图创建一个简单的计数器，将1计为5。号码为5后，下一个号码应重新回到1。

当我尝试倒回且计数器为1时会出现问题：它会变为0，而不会返回5。

http://jsfiddle.net/tmyie/YMB3e/2/

var $i = 1;

$('.increase').click(function () {
    ++$i;
    $('p').text($i);
    if ($i == 5) {
        $i = 0;
    }
});

$('.decrease').click(function () {
    --$i;
    $('p').text($i);
    if ($i == 0) {
        $i = 5;
    }
});

避免计数器转到0的最佳方法是什么，而是返回5？

Answer 1

将您的代码更改为：

var $i = 1;

$('.increase').click(function () {
    ++$i;
    if ($i > 5) {
        $i = 1;
    }
    $('p').text($i);
});

$('.decrease').click(function () {
    --$i;
    if ($i <= 0) {
        $i = 5;
    }
    $('p').text($i);
});

DEMO

Answer 2

错误的代码顺序。 $('p').text($i);应该在if ($i == 0) { $i = 5 }之后

正如@Anton在评论中所说：

  

如果你点击减少直到它的5然后点击增加它将会去   超过5

所以你还需要做一些改变：

var $i = 1;

$('.increase').click(function () {
    ++$i;
    if ($i > 5) {
        $i = 1;
    }
    $('p').text($i);
});

$('.decrease').click(function () {
    --$i;
    if ($i <= 0) {
        $i = 5;
    }
    $('p').text($i);
});

Working demo

Answer 3

像这样改变

$('.decrease').click(function () {

$('p').text($i);
 --$i;
if ($i == 0) {
    $i = 5;
}
});

Demo

Answer 4

我认为您需要在此修改if语句 - 如果$i为1则转到5，否则请关闭$i。同样调整increase功能。

$('.increase').click(function () {
  if ($i == 5) {
    $i = 1;
  } else {
    ++$i;
  }
  $('p').text($i);
});

$('.decrease').click(function () {
  if ($i == 1) {
    $i = 5;
  } else {
    --$i;
  }
  $('p').text($i);
});

Fiddle

Answer 5

更新变量后分配值：

var $i = 1;

$('.increase').click(function () {
    if (++$i == 6) {
        $i = 0;
    }
    $('p').text($i);
});

$('.decrease').click(function () {
    if (--$i == 0) {
        $i = 5;
    }
    $('p').text($i);
});

DEMO

或使用mod运算符 - ％

var $i = 0;

$('.increase').click(function () {
    $i++;
    $('p').text($i%5+1);
});

$('.decrease').click(function () {
    $i = --$i==-1 ? 5 : $i;
    $('p').text($i%5+1);
});

DEMO

Answer 6

的答案：

在执行逻辑之前更新DOM。

$('.increase').click(function () {
    ++$i;
    $('p').text($i); // <-- Update DOM
    if ($i == 5) {   // Logic after
        $i = 0;
    }
});

$ i永远不会是0。它会在下次点击时变为5然后1

<强>修正：

$('.increase').click(function () {
    ++$i;            // Logic
    if ($i == 5)  
        $i = 0;
    $('p').text($i); // <-- Update DOM after
});

---

我的建议，作为替代

为了改进代码并使其更易于维护，我会将其放入模块中，并使代码更加可扩展且可重用。

function Counter($count, $inc, $dec, settings) { // <- Make it into a Module
    settings = settings || {};
    var count = settings.initialCount || 0;
    var max = settings.max || 5;
    var min = settings.min || 0;
    $inc.click(function () {
       updateCount(1);
    });

    $dec.click(function () {
        updateCount(-1);
    });

    function updateCount(value){
        if(count+value > max) count = min;
        else if(count + value < min) count = max;
        else count += value;
        $count.html(count);
    }
    updateCount(0);

}
Counter($('.count'), $('.increase'), $('.decrease')); // <- Initiate the module

摆弄可重用性演示

<强> http://jsfiddle.net/R5swH/3/

Answer 7

试试这个

$('.increase').click(function (e) {
    $('p').text(($i==5?$i=0:++$i));
});

$('.decrease').click(function (e) {
    $('p').text(($i==0?$i=5:--$i));
});

DEMO