jQuery はショッピング カートの数値の加算と減算の効果を実装します_jquery

オンライン ショッピングの注文を送信する場合、通常、Web ページに数量選択コントロールがあり、購入者は購入する商品の数を選択する必要があります。開発者は、追加などの操作を微調整できるようにこのコントロールを作成します。もちろん、個数を直接入力することもできます。この記事では、スピナー デジタル スピナーを使用してデジタル加算および減算関数を実装する一般的な方法をいくつか紹介します。

左右の数字の足し算と引き算

たとえば、JD.com は現在、注文を送信するときに左右に数字を加算および減算するエフェクトを使用しています。このエフェクトは単純で操作が簡単です。 jquery.spinner.js プラグインを使用して、左右の数値を加算および減算します。呼び出し方法は非常に簡単です。デモの例 1 を参照してください。

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

呼び出しも非常に簡単です。まず、jquery ライブラリ ファイルと jquery.spinner.js をロードし、次のコードを使用します。

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

$('.spinner').spinner();

ブーツストラップ スタイル、右側にプラスとマイナス

ブートストラップは古くから人気があり、ブートストラップ形式のアプリケーションも数多くありますが、ブートストラップをベースにした最小値、最大値を設定できるデジタル加算・減算プラグインを紹介します。 、増加および減少 (ステップ値)、数値を手動で入力します。

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

ブートストラップ関連の CSS および JS ファイルをロードした後、プロジェクトがブートストラップに基づいている場合は、ページの効果を直接確認できます。デモ例 2 をご覧ください
プロジェクト アドレス https://github.com/xixilive/jquery-spinner を参照して、関連するパラメーター設定を表示することもできます。

jQuery ui スタイル、右側の加算と減算

jQuery ui には、最小値、最大値、増分と減分 (ステップ値) を設定し、手動で数値を入力できる数値加算および減算プラグインも提供されています。デモ例 3 をご覧ください

コードをコピー

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

プロジェクトで jquery ui を使用している場合は、jquery ui を呼び出して数値の加算と減算の関数を実装できます。

コードをコピーします

コードは次のとおりです: $("#spinner").spinner({ 最大:10、 分:0、

ステップ:2

});



上記はこの記事で説明した内容のすべてです。jQuery をマスターするのに役立つことを願っています。

関連ラベル：

jquery 番号 ショッピングカート

ソース：php.cn

前の記事：Flash画像アップロードコンポーネント swfupload使用ガイド_JavaScriptスキル 次の記事：JQuery エラー Uncaught TypeError: 不正な呼び出し処理 Method_jquery

このウェブサイトの声明

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

著者別の最新記事

• NullPointerException とは何ですか?どのように修正すればよいですか?
  2024-10-22 09:46:29
• 初心者からプログラマーへ: 旅は C の基礎から始まります
  2024-10-13 13:53:41
• PHP による Web 開発のロックを解除する: 初心者ガイド
  2024-10-12 12:15:51
• C の謎を解く: 新人プログラマーのための明確でシンプルな道
  2024-10-11 22:47:31
• コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  2024-10-11 19:36:51
• 内なるプログラマーを解き放つ: まったくの初心者のための C
  2024-10-11 15:50:41
• C で生活を自動化する: 初心者向けのスクリプトとツール
  2024-10-11 15:07:41
• PHP を簡単に: Web 開発の最初のステップ
  2024-10-11 14:21:21
• Python で何でも構築: 創造性を解き放つための初心者ガイド
  2024-10-11 12:59:11
• コーディングの鍵: 初心者のための Python の力を解き放つ
  2024-10-11 12:17:31

最新の問題

Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...

から 2024-04-06 14:54:03

0

2

421

jqueryを使用してHTMLデータテーブルの選択されていない行の値を取得する方法 ボタンがクリックされなかったすべての行の値を取得しようとしています。たとえば、最初の行のボタンをクリックしたときに、クリックされなかった行の値を取得したいとします。 vartabl...

から 2024-04-05 09:26:49

0

1

1418

エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...

から 2024-04-04 18:40:04

0

1

3528

ブックマークを介して純粋な CSS で要素を作成しました。作成されたが表示されない 私のコードは次のとおりです: g=document.createElement('div');g.setAttribute("id","divcont...

から 2024-04-04 17:27:27

0

1

417

Safari/Firefox iOS でフォ​​ームデータを送信できない これは、iOS 上の Safari/Firefox を除くすべてのプラットフォームで動作します: jQuery("#gform_1").one('submit'...

から 2024-04-04 12:53:48

0

1

303

関連トピック

詳細>

• jqueryプラグインとは何ですか?
• jQueryでJSONを操作する方法
• jqueryで要素を削除する方法
• jQueryのhover()メソッドの使用
• jqueryはページングメソッドを実装します
• jqueryの隠し要素とは何ですか
• jQueryでハイライト表示されているもの
• Javaで入力された数値を取得する方法