###前提・実現したいこと
三角形の図形をクリックするとh1の数字が基準の数字に5ずつ増えるパーセントを足した数字に変化する様に実装したいです。
###発生している問題・エラーメッセージ
上向きの三角形をクリックすると150000に5%の7500を足した157500に変化します。
ここまではよいのですが10%の場合だと157500の5%の7875を足した165375に変化してしまい、
150000の10%の15000を足した165000に変化させたいです。
今のjsの内容だと変化した数字が基準になっていますが、
ベースの150000を基準にして数字を変更させたいです。
20%なら150000+(1500000.2)、-40%なら150000-(1500000.4)といった具合です。
アドバイスや見本のコードを頂けると幸いです。
また今現在はsectionが2つだけですがこれが10、20と増えていき、
今のjsだとコードが肥大化してしまうと思いますので、これを改善する方法もよろしければアドバイスを頂けると幸いです。
お手数おかけしますがよろしくお願いします。
###該当のソースコード
jsfiddleにもアップしています。
https://jsfiddle.net/ululami/ke6s8oL9/
javascript
1var baseNum01 = ''; 2var baseNum02 = ''; 3 4var count01 = 0; 5var count02 = 0; 6 7$(function() { 8 $('.up_01').on('click',function(){ 9 baseNum01 = parseInt($('.base_01').text()); 10 baseNum01 = baseNum01 + (baseNum01 * 0.05); 11 $('.base_01').text(baseNum01); 12 count01 = count01 + 5; 13 $('.percent_01').text(count01); 14 }); 15 16 $('.down_01').on('click',function(){ 17 baseNum01 = parseInt($('.base_01').text()); 18 baseNum01 = baseNum01 - (baseNum01 * 0.05); 19 $('.base_01').text(baseNum01); 20 count01 = count01 - 5; 21 $('.percent_01').text(count01); 22 }); 23 24 $('.up_02').on('click',function(){ 25 baseNum02 = parseInt($('.base_02').text()); 26 baseNum02 = baseNum02 + (baseNum02 * 0.05); 27 $('.base_02').text(baseNum02); 28 count02 = count02 + 5; 29 $('.percent_02').text(count02); 30 }); 31 32 $('.down_02').on('click',function(){ 33 baseNum02 = parseInt($('.base_02').text()); 34 baseNum02 = baseNum02 - (baseNum02 * 0.05); 35 $('.base_02').text(baseNum02); 36 count02 = count02 - 5; 37 $('.percent_02').text(count02); 38 }); 39});
html
1<div class="wrapper"> 2 <section> 3 <h1 class="base_01"> 4 150000 5 </h1> 6 <p class="up_01"> 7 △ 8 </p> 9 <p> 10 <span class="percent_01">0</span>% 11 </p> 12 <p class="down_01"> 13 ▽ 14 </p> 15 </section> 16 17 <section> 18 <h1 class="base_02"> 19 375000 20 </h1> 21 <p class="up_02"> 22 △ 23 </p> 24 <p> 25 <span class="percent_02">0</span>% 26 </p> 27 <p class="down_02"> 28 ▽ 29 </p> 30 </section> 31 </div>
css
1*{ 2 margin: 0; 3 padding: 0; 4} 5 6section{ 7 padding: 30px; 8} 9 10p{ 11 margin: 10px 0; 12 cursor: pointer; 13}
###補足情報(言語/FW/ツール等のバージョンなど)
jquery-2.2.4.min.js
回答6件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/05/02 02:07