jqueryで入力ボックスの数値の増減関数を実装する方法

Web開発では、ショッピングカートの数や商品の数など、入力ボックスの数値増減機能がよく使われます。この記事ではjqueryを使って入力ボックスの数を増減する方法を紹介します。

コードの実装:

まず、jquery ライブラリ ファイルを導入する必要があります:

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

次に、入力ボックスと数値を増減する 2 つのボタンを追加します。

<input type="text" id="input_num" value="1" />
<button id="btn_reduce">-</button>
<button id="btn_add">+</button>

次に、JavaScript コードで、jquery セレクターを通じて上で定義した入力ボックスとボタン要素を取得し、イベント リスナーを追加できます。

$(function() {
  var inputNum = $('#input_num');
  var btnAdd = $('#btn_add');
  var btnReduce = $('#btn_reduce');
  
  // 增加数字
  btnAdd.on('click', function() {
    var num = parseInt(inputNum.val());
    inputNum.val(num + 1);
  });
  
  // 减少数字
  btnReduce.on('click', function() {
    var num = parseInt(inputNum.val());
    if(num > 1) {
      inputNum.val(num - 1);
    }
  });
});

コード分析:

まず、jquery セレクターを使用して入力ボックスとボタン要素を取得し、変数に保存します。

次に、ボタンのクリック イベントをリッスンするクリック イベント リスナーを追加します。

ボタンのクリック イベントでは、val() メソッドを使用して入力ボックスの値を取得し、parseInt() メソッドを通じてそれを整数型に変換します。

追加ボタンのクリック イベントで、その値を 1 ずつ増やし、val() メソッドを使用して新しい値を入力ボックスに渡します。

縮小ボタンのクリック イベントでは、まず入力ボックスの値が 1 より大きいかどうかを判断し、大きい場合はその値を 1 減らします。

概要:

上記のコード実装を通じて、入力ボックスの番号を増減する単純な関数を実装できます。さらに、入力ボックスの最大値と最小値を制限するなど、同様のコードを通じてさらに多くの機能を実装することもできます。 jquery は、開発作業を大幅に簡素化できる多くの実用的なメソッドと関数を提供する強力な JavaScript ライブラリです。したがって、Web 開発者にとって、jquery を学習して習得することは非常に必要です。

以上がjqueryで入力ボックスの数値の増減関数を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。