プラス/マイナスカウンタープラスの結果（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

$('#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>

Answer 2

これを達成するためには、単に値が> 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>