クリックすると増減する数値に下限と上限を設定したい

Question

現在は左クリックをすると現在の数値に+1　右クリックをすると現在の数値から-1
される仕様になっているのですが、この数値に下限と上限を設定したいです。
(右クリックをしても0以下の数値にはならないように)

調べ方が悪いのか自分と似たような物を実装しようとしているケースが中々見つからず…
初歩的な質問かもしれませんがご教授願います。

<button class="box" type="button">0</button></li>

<script>
	$(function(){
		$('.box').on('click',function(){
		$(this).text(parseInt($(this).text())+1);
	});
		$('.box').on('contextmenu',function(){
		$(this).text(parseInt($(this).text())-1);
	});
});
<script>

Answer 1

別に間違っているわけではないので新しく回答しますが、基本的なコードはNEO_PLANETT-777さんのコードを参考にしています。

<script>
  $(function() {
    $('.box').on({
      'click': function() {
        if ( parseInt($(this).text()) < 上限値 ) {
          $(this).text(parseInt($(this).text()) + 1);
        }
      },

      'contextmenu': function(){
        if ( parseInt($(this).text()) > 下限値 ) {
          $(this).text(parseInt($(this).text()) - 1);
        }
      }
    });
  });
<script>

こんな書き方もできるよ、というご紹介です。

Comments

[popepe]

cssと違って本当に色々な書き方ができますね…。
参考にしたいと思います。ありがとうございました。

[kyoya0819]

ここら辺は完全に好みなので、可読性に注意しながらお好きな記法を追求してってもよいいと思ったり。

Answer 2

単純に$(this).text()を上限値、下限値で比較しては？

<script>
  $(function() {
    var tmp = parseInt($(this).text());
    $('.box').on('click',function() {
      if ( tmp < 上限値 ) {
        $(this).text(tmp + 1);
      }
    });

    $('.box').on('contextmenu',function(){
      if ( tmp > 下限値 ) {
        $(this).text(tmp - 1);
      }
    });
  });
<script>

Comments

[popepe]

書いて下さったコードを参考にやってみます。
ありがとうございました。

Answer 3

ベストアンサー後ですが上限下限のロジックを<input type="range">に投げるご提案。

<button class="box" type="button">
  0
  <input style="display:none" type="range" value="0" min="-5" max="5">
</button>

$(function(){
  $('.box').on('click',function() {
    this.firstElementChild.stepUp();
    this.firstChild.data = this.firstElementChild.value;
  });
  $('.box').on('contextmenu',function() {
    event.preventDefault();
    this.firstElementChild.stepDown();
    this.firstChild.data = this.firstElementChild.value;
  });
});

Comments

[popepe]

気づかず返信遅れてすみません。
参考にします。ありがとうございます。

Answer 4

• 加算して上限をこえてたら上限まで戻す
• 上限まで達したら加算しない

のどちらかで判断します

Comments

[yambejp]

$(function(){
$('.box').on('click contextmenu',function(e){
var min=0;
var max=10;
var num=parseInt($(this).text());
var add=0;
if(e.type=="click" && num<max) add=1;
if(e.type=="contextmenu" && num>min) add=-1;
$(this).text(num+add);
});
});

[popepe]

このような書き方でも実装できるのですね。
こちらも参考にしてみます。この間の質問の時もありがとうございました。

Answer 5

ご自身が作成したコードで設定してるときに parseInt してますよね
それと同じ感覚で処理すればいいのです

Comments

[popepe]

自分が使っているコードの大半はネットから拾ってきたもの or 書いて頂いたものを改変したものなんです。
自分自身で書けるのは本当に簡単なモノしかできないので、質問させていただきました。