###実現したいこと
現在各項目に数字が入っていますが、この数字に万や億を入れた桁文字に変更したいです。
###現在の状況
三角をクリックすると元の数字から5%ごとに値が変化し、例えば項目1-1と項目1-2の値が変化すると大元の項目1の合計値が変化します。
同様に項目2もクリックして変化でき、項目1と項目2を合計した数字が表示されている状況です。
###試したこと
桁文字用の関数をいろいろと調べて作ってみて
項目1と項目2の合計の下に出力してみたのですが上手く桁文字で表示されています。
ですので桁文字用の関数はあっていると思うのですが、
それをどうやって全ての項目に適用するのかが詰まっています。
関数ketamojiの中の変数numにダミーの数字として123455000を入れていますが、ここの値が関数を呼び出すたびに変わる必要があると思いますがいろいろとやってみましたが、上手く行きませんでした。
お手数おかけしますがよろしくお願いします。
ソースコードをjsfiddleにアップしています。
https://jsfiddle.net/ululami/y6kxzz5x/4/
###該当のソースコード
javascript
1$(function() { 2 itemBase(); 3 item1Sum(); 4 item2Sum(); 5 itemTotal(); 6 7 //項目1-1から2-2の合計用の変数 8 var item1_1 = 0; 9 var item1_2 = 0; 10 var item2_1 = 0; 11 var item2_2 = 0; 12 13 //桁文字用の関数 14 function ketamoji() { 15 var num = 123455000; 16 var keta = ['', '万', '億', '兆', '京']; 17 var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse(); 18 var data = ''; 19 for (var i = 0; i < nums.length; i++) { 20 if (!nums[i].match(/^[0]+$/)) { 21 data = nums[i].replace(/^[0]+/g, "") + keta[i] + data; 22 } 23 } 24 $('.ketamoji_test span').text(data); 25 }; 26 27 ketamoji(); 28 29 //項目1の合計用関数 30 function item1Sum() { 31 item1_1 = parseInt($('.item1_1__heading span').text()); 32 item1_2 = parseInt($('.item1_2__heading span').text()); 33 $('.item1__heading span').text(item1_1 + item1_2); 34 35 itemTotal(); 36 }; 37 38 //項目2の合計用関数 39 function item2Sum() { 40 item2_1 = parseInt($('.item2_1__heading span').text()); 41 item2_2 = parseInt($('.item2_2__heading span').text()); 42 $('.item2__heading span').text(item2_1 + item2_2); 43 44 itemTotal(); 45 }; 46 47 //項目1と項目2の合計用関数 48 function itemTotal() { 49 $('.sum__heading span').text(item1_1 + item1_2 + item2_1 + item2_2); 50 }; 51 52 function itemBase() { 53 //元になるデータ 54 var numsData = [100000, 200000, 300000, 400000]; 55 56 $('.item1_1__heading span').text(numsData[0]); 57 $('.item1_2__heading span').text(numsData[1]); 58 $('.item2_1__heading span').text(numsData[2]); 59 $('.item2_2__heading span').text(numsData[3]); 60 61 //項目の数字の割合変更用の関数 62 var changeRate = function(targetVal, targetRate) { 63 var base = parseInt($(targetVal).text()); 64 var rate = parseInt($(targetRate).text()); 65 return function(r) { 66 rate = rate + r; 67 $(targetVal).text(base * (100 + rate) / 100); 68 $(targetRate).text(rate); 69 }; 70 }; 71 72 //三角をクリックで元の数字を5%ずつ変化させる 73 //項目1-1から項目2-2まで 74 var itme1_1 = changeRate('.item1_1__heading span', '.item1_1__percent span'); 75 $('.imte1_1__up').on('click', function() { 76 itme1_1(5); 77 item1Sum(); 78 }); 79 $('.imte1_1__down').on('click', function() { 80 itme1_1(-5); 81 item1Sum(); 82 }); 83 84 var itme1_2 = changeRate('.item1_2__heading span', '.item1_2__percent span'); 85 $('.imte1_2__up').on('click', function() { 86 itme1_2(5); 87 item1Sum(); 88 }); 89 $('.imte1_2__down').on('click', function() { 90 itme1_2(-5); 91 item1Sum(); 92 }); 93 94 var itme2_1 = changeRate('.item2_1__heading span', '.item2_1__percent span'); 95 $('.imte2_1__up').on('click', function() { 96 itme2_1(5); 97 item2Sum(); 98 }); 99 $('.imte2_1__down').on('click', function() { 100 itme2_1(-5); 101 item2Sum(); 102 }); 103 104 var itme2_2 = changeRate('.item2_2__heading span', '.item2_2__percent span'); 105 $('.imte2_2__up').on('click', function() { 106 itme2_2(5); 107 item2Sum(); 108 }); 109 $('.imte2_2__down').on('click', function() { 110 itme2_2(-5); 111 item2Sum(); 112 }); 113 114 }; 115 116}); 117
html
1<div class="item item1"> 2 <h1 class="item1__heading">項目1の合計:<span></span>円</h1> 3 <section class="item__sub item1_1"> 4 <h2 class="item1_1__heading">項目1-1:<span></span>円</h2> 5 <div class="imte1_1__up up"> 6 △ 7 </div> 8 <div class="item1_1__percent"> 9 <span>0</span>% 10 </div> 11 <div class="imte1_1__down down"> 12 ▽ 13 </div> 14 </section> 15 <section class="item__sub item1_2"> 16 <h2 class="item1_2__heading">項目1-2:<span></span>円</h2> 17 <div class="imte1_2__up up"> 18 △ 19 </div> 20 <div class="item1_2__percent"> 21 <span>0</span>% 22 </div> 23 <div class="imte1_2__down down"> 24 ▽ 25 </div> 26 </section> 27</div> 28 29<div class="item item2"> 30 <h1 class="item2__heading">項目2の合計:<span></span>円</h1> 31 <section class="item__sub item2_1"> 32 <h2 class="item2_1__heading">項目2-1:<span></span>円</h2> 33 <div class="imte2_1__up up"> 34 △ 35 </div> 36 <div class="item2_1__percent"> 37 <span>0</span>% 38 </div> 39 <div class="imte2_1__down down"> 40 ▽ 41 </div> 42 </section> 43 <section class="item__sub item2_2"> 44 <h2 class="item2_2__heading">項目2-2:<span></span>円</h2> 45 <div class="imte2_2__up up"> 46 △ 47 </div> 48 <div class="item2_2__percent"> 49 <span>0</span>% 50 </div> 51 <div class="imte2_2__down down"> 52 ▽ 53 </div> 54 </section> 55</div> 56 57<div class="sum"> 58 <h1 class="sum__heading">項目1と項目2の合計:<span></span>円</h1> 59</div> 60 61<p class="ketamoji_test">桁文字のテスト:<span></span></p> 62
css
1* { 2 margin: 0; 3 padding: 0; 4} 5 6h1, 7h2 { 8 font-weight: normal; 9} 10 11h1 { 12 font-size: 14px; 13 background: #666; 14 color: #fff; 15 padding: 5px; 16} 17 18body { 19 padding: 15px; 20} 21 22.item:not(:first-child), 23.sum { 24 margin-top: 15px; 25} 26 27.item__sub { 28 margin-top: 8px; 29 font-size: 12px; 30} 31 32.item__sub h2 { 33 font-size: 14px; 34} 35 36.up, 37.down { 38 cursor: pointer; 39} 40 41.ketamoji_test { 42 margin-top: 10px; 43} 44
###補足情報(言語/FW/ツール等のバージョンなど)
jQuery version 2.2.4
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/06/04 18:10
2017/06/04 18:15 編集
2017/06/04 20:02 編集
2017/06/04 23:39