input value数値の変動

Question

inputタグによって作成したエリア内に上限,下限を持たせた数値エリアを入れたいです。
中央に数値エリア、両サイドにプラスボタン、マイナスボタンのセットが複数ある構造です。
ボタンによる数値の上げ下げは実装できました。

が、問題点は以下です。

・上限（99）、下限（0）を指定できない。
・ボタンを押すと全数値が変わってしまう。

解決方法が見つからず、ご教示いただけないでしょうか。

<ul class="value_wrap">
<li>
<ul>
　　<li>
　　　　<button type="button" name="button" class="btn-minus">
　　　　　　<img src="../../assets/img/test.png" width="24">
       </button>
    </li>
    <li>
       <input type="number" min="0" max="99" name="test01" class="option_value" value="0"> 
    </li>
    <li>
　　　　<button type="button" name="button" class="btn-plus">
　　　　　　<img src="../../assets/img/test.png" width="24">
       </button>
    </li>
</ul>
<ul>
　　<li>
　　　　<button type="button" name="button" class="btn-minus">
　　　　　　<img src="../../assets/img/test.png" width="24">
       </button>
    </li>
    <li>
       <input type="number" min="0" max="99" name="test01" class="option_value" value="0"> 
    </li>
    <li>
　　　　<button type="button" name="button" class="btn-plus">
　　　　　　<img src="../../assets/img/test.png" width="24">
       </button>
    </li>
</ul>
<ul>
　　<li>
　　　　<button type="button" name="button" class="btn-minus">
　　　　　　<img src="../../assets/img/test.png" width="24">
       </button>
    </li>
    <li>
       <input type="number" min="0" max="99" name="test01" class="option_value" value="0"> 
    </li>
    <li>
　　　　<button type="button" name="button" class="btn-plus">
　　　　　　<img src="../../assets/img/test.png" width="24">
       </button>
    </li>
</ul>
</li>
</ul>

$(function(){
    $('.btn-plus').on('click', function() {
        var quantity = parseInt($('.option_value').val());
        $('[name="test01"]').attr("value", parseInt(quantity) + 1);
    });
    $('.btn-minus').on('click', function() {
        var quantity = parseInt($('.option_value').val());
        $('[name="test01"]').attr("value", parseInt(quantity) - 1);
    });
});

Comments

[m.ts10806]

type="range"を使うことは考えてないですか？ https://web-designer.cman.jp/html_ref/abc_list/input_range/

[退会済みユーザー]

考えておりません。

[m.ts10806]

なるほど。では質問のコードを更新していただきたいのが、複数ペア設置されているのであればその分、htmlのコードを載せてください。正しく再現確認するには全く同じコードである必要があります。

[退会済みユーザー]

mts10806様　HTMLを更新しました。ご確認お願いします。

Answer 1

$(function(){
    $('.btn-plus').on('click', function() {
        var quantity = parseInt($(this).parent().prev().children('input').val());
        if(quantity < 99){
          $(this).parent().prev().children('input').attr("value", parseInt(quantity) + 1);
        }
    });
    $('.btn-minus').on('click', function() {
        var quantity = parseInt($(this).parent().next().children('input').val());
        if(quantity > 0){
           $(this).parent().next().children('input').attr("value", parseInt(quantity) - 1);
        }
    });
});

見た目の数字の変更だけでいいなら上記だけで大丈夫ですが、formで値を取るならば 3箇所ある
<input type="number" min="0" max="99" name="test01" class="option_value" value="0">
のname属性をname="test01” name="test02” name="test03” と分けたほうがいいと思います。

Comments

[退会済みユーザー]

colling様
解決できました。補足までありがとうございました。

Answer 2

stepUp()、stepDown()メソッドがあり、min/max/step値を考慮した変更ができます。

    $('.btn-plus').on('click', function(event) {
        var input = $(this).closest('li').prev().find('input');
        input[0].stepUp();
    });
    $('.btn-minus').on('click', function() {
        var input = $(this).closest('li').next().find('input');
        input[0].stepDown();
    });

https://developer.mozilla.org/ja/docs/Web/API/HTMLInputElement

なお、IEはメソッドがあるのにコールすると例外を吐くという重大な欠点があり、IEを考慮する場合には手間がかかります。

typeof document.querySelector('input[type="number"]').stepUp; // "function"
document.querySelector('input[type="number"]').stepUp(); // InvalidStateError

Answer 3

$(function(){
  $('.btn-minus,.btn-plus').on('click',function(e){
    var target=$(this).closest('ul').find('[name=test01]');
    var val=parseInt(target.val());
    if($(this).filter('.btn-minus').length>0) target.val(val>0?val-1:0);
    if($(this).filter('.btn-plus').length>0) target.val(val<99?val+1:99);
    
  });
});