ホームページ > 記事 > ウェブフロントエンド > jQuery を使用して入力値を増減する方法_jquery

jQuery を使用して入力値を増減する方法_jquery

WBOYオリジナル: 2016-05-16 16:18:171185ブラウズ

この記事の例では、jQuery を使用して入力値のインクリメントとデクリメントを実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

多くのECサイトでは、ショッピングカートのあるページに商品の数量に関して、1ずつ増減するボタンと-ボタンが設けられており、数値のみ入力可能となっています。入力欄に入力します。 Bootstrap TouchSpin プラグインは、このニーズを満たすために作成されました。 (ここをクリックして、このサイトから Bootstrap TouchSpin プラグインをダウンロードします。)

まず必要なcssファイルとjsファイルを導入します。

コードをコピーコードは次のとおりです:

<スクリプト src="bootstrap/js/bootstrap.min.js">

1. 数値の精度と自動増減を制御します

コードをコピーしますコードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$("input[name='demo1']").TouchSpin({
分: 0、
最大: 100、
step: 0.1, //増分または減分
小数点: 2, //精度
ブースタ: 5、
maxboostedstep: 10,
接尾辞: '%' //接尾辞
});
});

●数値ボタンをクリックすると 0.1 ずつ増加します ● - ボタンをクリックすると、値が 0.1 ずつ減少します

● 小数点以下 2 桁を保持

● 最小許容値 0.00
● 最大許容値 100.00
● 数値のみ入力可能です。入力しないとフォーカスが外れ、最小値は0.00
と表示されます。

2. 1 から始まる整数のみが許可されます。これはショッピングカートページでもよく行われます

コードをコピーコードは次のとおりです:

<スクリプトタイプ="text/javascript">
$(関数 () {
$("input[name='demo2']").TouchSpin({
分: 1、
最大: 100、
ステップ: 1//インクリメントまたはデクリメント
});
});

●数字ボタンをクリックすると 1 ずつ増えます ● - ボタンをクリックすると、1 ずつ減ります

● 最小許容値 1

● 最大許容値 100
● 数値のみを入力できます。入力しないとフォーカスが失われ、最小値の 1 が表示されます

その他の使用法として、興味のある友人は関連ドキュメントを参照できます。

この記事が皆さんの jQuery プログラミングに役立つことを願っています。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：content_jquery を変更するための JQuery セレクターバインディングイベントとメソッド次の記事：content_jquery を変更するための JQuery セレクターバインディングイベントとメソッド

続きを見る

jQuery を使用して入力値を増減する方法_jquery

関連記事