質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

【jQuery】プラスマイナスのボタンを商品ごとに動くようにしたい。

KAZUHA
KAZUHA

総合スコア13

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0リアクション

0クリップ

240閲覧

投稿2022/06/19 07:38

編集2022/06/19 07:39

お世話になります。
ショッピングサイトで数量カウンターを作っているのですが、
一つの商品のプラスを押すと他の商品まで連動してしまい困っております。
商品ごとにプラスマイナスボタンを動かしたいです。
.btnspinnerが同じだからだと思うのですが、
thisで個別に認識したいのですが、なかなかうまくいきません。
アドバイスいただけると幸いです。宜しくお願い致します。

実際の動き
https://codepen.io/moge_penguin/pen/abqxYMy

pug

ul li.one div.ImageMain.ImageMain_s div.Detail p.s_title りんご p.s_price ¥100 form(name="form2") div(class="spinner_area") input.count(type="number",name="りんご", value="1", data-max="100", data-min="1") input.btnspinner(type="button", value="+", data-cal="1", data-target=".count") input.btnspinner(type="button", value="-", data-cal="-1",data-target=".count") button.item_cart_btn.js_cart_btn(data-name="りんご" data-price="100") カートに入れる button.item_heart_btn.js_heart_btn(data-name="りんご" data-price="100") お気に入り登録 li.two div.Detail p.s_title にんじん p.s_price ¥120 form(name="form2") div(class="spinner_area") input.count(type="number",name="にんじん", value="1", data-max="100", data-min="1") input.btnspinner(type="button", value="+", data-cal="1", data-target=".count") input.btnspinner(type="button", value="-", data-cal="-1", data-target=".count") button.item_cart_btn.js_cart_btn(data-name="にんじん" data-price="120") カートに入れる button.item_heart_btn.js_heart_btn(data-name="にんじん" data-price="120") お気に入り登録

jQuery

$(function(){ let arySpinnerCtrl = []; let spin_speed = 20; //変動スピード //長押し押下時 $(' .btnspinner').on('click', function(e){ if(arySpinnerCtrl['interval']) return false; let target = $(this).data('target'); arySpinnerCtrl['target'] = target; arySpinnerCtrl['timestamp'] = e.timeStamp; arySpinnerCtrl['cal'] = Number($(this).data('cal')); //クリックは単一の処理に留める if(e.type == 'click'){ spinnerCal(); arySpinnerCtrl = []; return false; } //長押し時の処理 setTimeout(function(){ //インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理 if(!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp){ arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed); } }, 500); }); //長押し解除時 画面スクロールも解除に含む $(document).on('touchend mouseup scroll', function(e){ if(arySpinnerCtrl['interval']){ clearInterval(arySpinnerCtrl['interval']); arySpinnerCtrl = []; } }); //変動計算関数 function spinnerCal(){ let target = $(arySpinnerCtrl['target']); let num = Number(target.val()); num = num + arySpinnerCtrl['cal']; if(num > Number(target.data('max'))){ target.val(Number(target.data('max'))); }else if(Number(target.data('min')) > num){ target.val(Number(target.data('min'))); }else{ target.val(num); } } });

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。