jqueryで数字に桁文字を実装したい

###実現したいこと
現在各項目に数字が入っていますが、この数字に万や億を入れた桁文字に変更したいです。

###現在の状況
三角をクリックすると元の数字から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件

ベストアンサー

こうすればいかがでしょう。

JavaScript
1//桁文字用の関数
2function ketamoji( num ) {
3	var keta = ['', '万', '億', '兆', '京'];
4	var nums = String(num).replace(/(\d)(?=(\d\d\d\d)+$)/g, "$1,").split(",").reverse();
5	var data = '';
6	for (var i = 0; i < nums.length; i++) {
7	  if (!nums[i].match(/^[0]+$/)) {
8	    data = nums[i].replace(/^[0]+/g, "") + keta[i] + data;
9	  }
10	}
11	return data;
12};
13$('.ketamoji_test span').text( ketamoji( 123455000 ) );

投稿2017/06/04 17:13

kei344

総合スコア69398

owl

2017/06/04 18:10

夜分に関わらずご回答ありがとうございます。 https://jsfiddle.net/ululami/jqxzd0u4/1/ 桁文字が項目1-1、項目1-2、項目2-1、項目2-2が上手く表示されましたが、合計とパーセンテージを変更した場合億以上の数字になってしまいます。これは恐らく計算するときに数字と文字が入っているために、億以上の数字をベースに計算しているためだと思います。これを改善するには計算するときには桁が入っていない数字で計算し、出力するときは桁入りで表示する必要があると思いますが、その場合はどうすれば良いでしょうか。よろしくお願いいたします。

kei344

2017/06/04 18:15 編集

$('.item1_1__heading span').data( 'suuji', numsData[0] ) 【.data() | jQuery 1.9 日本語リファレンス | js STUDIO】 http://js.studio-kingdom.com/jquery/data/data 表示とデータは分けたほうが良いですよ。

owl

2017/06/04 20:02 編集

ご回答ありがとうございます。 https://jsfiddle.net/ululami/ktp54kap/3/ .data()を使いパーセントを変更しても桁文字が表示されました。本当にありがとうございます。度々質問を申し訳ありませんが、項目の合計の数字がパーセントを変更しても変わりません。恐らく今は元の数字のdata()から取得しているのですが、項目の数字の割合変更用の関数はdata()を更新していないために合計の数値が変わらないのではないかと思います。この場合はどの様にすれば良いでしょうか。度々ですがよろしくお願いします。

owl

2017/06/04 23:39

https://jsfiddle.net/ululami/pj1fLuw4/2/ 項目の数字の割合変更用の関数に、 $(targetVal).data('suuji', (base * (100 + rate) / 100)); を追加したら合計の値も更新できました。本当にありがとうございます。

行動規範の内容に同意します