お世話になります。
ショッピングサイトで数量カウンターを作っているのですが、
一つの商品のプラスを押すと他の商品まで連動してしまい困っております。
商品ごとにプラスマイナスボタンを動かしたいです。
.btnspinnerが同じだからだと思うのですが、
thisで個別に認識したいのですが、なかなかうまくいきません。
アドバイスいただけると幸いです。宜しくお願い致します。
実際の動き
https://codepen.io/moge_penguin/pen/abqxYMy
pug
1ul 2 li.one 3 div.ImageMain.ImageMain_s 4 div.Detail 5 p.s_title りんご 6 p.s_price ¥100 7 form(name="form2") 8 div(class="spinner_area") 9 input.count(type="number",name="りんご", value="1", data-max="100", data-min="1") 10 input.btnspinner(type="button", value="+", data-cal="1", data-target=".count") 11 input.btnspinner(type="button", value="-", data-cal="-1",data-target=".count") 12 button.item_cart_btn.js_cart_btn(data-name="りんご" data-price="100") カートに入れる 13 button.item_heart_btn.js_heart_btn(data-name="りんご" data-price="100") お気に入り登録 14 li.two 15 div.Detail 16 p.s_title にんじん 17 p.s_price ¥120 18 form(name="form2") 19 div(class="spinner_area") 20 input.count(type="number",name="にんじん", value="1", data-max="100", data-min="1") 21 input.btnspinner(type="button", value="+", data-cal="1", data-target=".count") 22 input.btnspinner(type="button", value="-", data-cal="-1", data-target=".count") 23 button.item_cart_btn.js_cart_btn(data-name="にんじん" data-price="120") カートに入れる 24 button.item_heart_btn.js_heart_btn(data-name="にんじん" data-price="120") お気に入り登録
jQuery
1 2$(function(){ 3 let arySpinnerCtrl = []; 4 let spin_speed = 20; //変動スピード 5 6 //長押し押下時 7 $(' .btnspinner').on('click', function(e){ 8 if(arySpinnerCtrl['interval']) return false; 9 let target = $(this).data('target'); 10 arySpinnerCtrl['target'] = target; 11 arySpinnerCtrl['timestamp'] = e.timeStamp; 12 arySpinnerCtrl['cal'] = Number($(this).data('cal')); 13 //クリックは単一の処理に留める 14 if(e.type == 'click'){ 15 spinnerCal(); 16 arySpinnerCtrl = []; 17 return false; 18 } 19 //長押し時の処理 20 setTimeout(function(){ 21 //インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理 22 if(!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp){ 23 arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed); 24 } 25 }, 500); 26 }); 27 28 //長押し解除時 画面スクロールも解除に含む 29 $(document).on('touchend mouseup scroll', function(e){ 30 if(arySpinnerCtrl['interval']){ 31 clearInterval(arySpinnerCtrl['interval']); 32 arySpinnerCtrl = []; 33 } 34 }); 35 36 //変動計算関数 37 function spinnerCal(){ 38 let target = $(arySpinnerCtrl['target']); 39 let num = Number(target.val()); 40 num = num + arySpinnerCtrl['cal']; 41 if(num > Number(target.data('max'))){ 42 target.val(Number(target.data('max'))); 43 }else if(Number(target.data('min')) > num){ 44 target.val(Number(target.data('min'))); 45 }else{ 46 target.val(num); 47 } 48 } 49 50}); 51

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2022/06/20 02:12 編集