inputタグによって作成したエリア内に上限,下限を持たせた数値エリアを入れたいです。
中央に数値エリア、両サイドにプラスボタン、マイナスボタンのセットが複数ある構造です。
ボタンによる数値の上げ下げは実装できました。
が、問題点は以下です。
・上限(99)、下限(0)を指定できない。
・ボタンを押すと全数値が変わってしまう。
解決方法が見つからず、ご教示いただけないでしょうか。
HTML
1<ul class="value_wrap"> 2<li> 3<ul> 4 <li> 5 <button type="button" name="button" class="btn-minus"> 6 <img src="../../assets/img/test.png" width="24"> 7 </button> 8 </li> 9 <li> 10 <input type="number" min="0" max="99" name="test01" class="option_value" value="0"> 11 </li> 12 <li> 13 <button type="button" name="button" class="btn-plus"> 14 <img src="../../assets/img/test.png" width="24"> 15 </button> 16 </li> 17</ul> 18<ul> 19 <li> 20 <button type="button" name="button" class="btn-minus"> 21 <img src="../../assets/img/test.png" width="24"> 22 </button> 23 </li> 24 <li> 25 <input type="number" min="0" max="99" name="test01" class="option_value" value="0"> 26 </li> 27 <li> 28 <button type="button" name="button" class="btn-plus"> 29 <img src="../../assets/img/test.png" width="24"> 30 </button> 31 </li> 32</ul> 33<ul> 34 <li> 35 <button type="button" name="button" class="btn-minus"> 36 <img src="../../assets/img/test.png" width="24"> 37 </button> 38 </li> 39 <li> 40 <input type="number" min="0" max="99" name="test01" class="option_value" value="0"> 41 </li> 42 <li> 43 <button type="button" name="button" class="btn-plus"> 44 <img src="../../assets/img/test.png" width="24"> 45 </button> 46 </li> 47</ul> 48</li> 49</ul>
jquery
1$(function(){ 2 $('.btn-plus').on('click', function() { 3 var quantity = parseInt($('.option_value').val()); 4 $('[name="test01"]').attr("value", parseInt(quantity) + 1); 5 }); 6 $('.btn-minus').on('click', function() { 7 var quantity = parseInt($('.option_value').val()); 8 $('[name="test01"]').attr("value", parseInt(quantity) - 1); 9 }); 10});
回答3件
あなたの回答
tips
プレビュー