带有加号结果的加/减计数器 (jquery)

Question

我得到了这个计算点击次数(加或减)的简单函数。它工作正常。 事实是负值出现在它们前面的减号(例如。-3)，但对于积极的则不一样。

有没有办法让阳性结果在开头显示加号(例如。+3)？

$('#increase').click(function() {
$('#output').html(function(i, val) {
return val * 1 + 1
});
});
$('#decrease').click(function() {
$('#output').html(function(i, val) {
return val * 1 - 1
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="increase" type="button">+</button>
<button id="decrease" type="button">-</button>
<div id="output">10</div>

Answer 1

要实现这一点，您可以简单地检查该值是否> 0，如果是，则在其前面加上一个+。

另请注意，您可以通过使用按钮上的data属性来指定要递增的值来 DRY 代码。这意味着您可以在两个按钮上使用单个事件处理程序，如下所示：

$('button').click(function() {
var $btn = $(this);
$('#output').html(function(i, val) {
val = val * 1 + $btn.data('inc');
return (val <= 0 ? '' : '+') + val;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="increase" type="button" data-inc="1">+</button>
<button id="decrease" type="button" data-inc="-1">-</button>
<div id="output">+10</div>

Answer 2

$('#increase').click(function() {
$('#output').html(function(i, val) { 
if (val < 11) {
var ret = val * 1 + 1;
}
return ret > 0 ? "+" + ret : ret;
});
});
$('#decrease').click(function() {
$('#output').html(function(i, val) { 
if(val > -11) {
var ret = val * 1 - 1;
}
return ret > 0 ? "+" + ret : ret;
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="increase" type="button">+</button>
<button id="decrease" type="button">-</button>
<div id="output">+10</div>