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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

6回答

1760閲覧

基準の数字を変更せずに計算したい

owl

総合スコア42

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2017/04/24 06:43

###前提・実現したいこと
三角形の図形をクリックすると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"> 78 </p> 9 <p> 10 <span class="percent_01">0</span>% 11 </p> 12 <p class="down_01"> 1314 </p> 15 </section> 16 17 <section> 18 <h1 class="base_02"> 19 375000 20 </h1> 21 <p class="up_02"> 2223 </p> 24 <p> 25 <span class="percent_02">0</span>% 26 </p> 27 <p class="down_02"> 2829 </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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

ベストアンサー

サンプル

基準値をキャッシュするのは他の皆さんのコードと同じです。
複数の要素に同じコードを適用する為には構造に規則性を持たせて相対的な位置指定をする必要があります。

HTML

1<div class="wrapper"> 2 <section class="sample"> 3 <h1 class="number">150000</h1> 4 <p class="up">△</p> 5 <p><span class="add-rate">0</span>%</p> 6 <p class="down">▽</p> 7 </section> 8 <section class="sample"> 9 <h1 class="number">375000</h1> 10 <p class="up">△</p> 11 <p><span class="add-rate">0</span>%</p> 12 <p class="down">▽</p> 13 </section> 14</div> 15 16<script> 17'use strict'; 18document.querySelectorAll('.sample').forEach(function (element) { 19 element.addEventListener('click', {baseNumber: +element.querySelector('.number').firstChild.data, handleEvent: this}, false); 20}, function handleClick (event) { 21 var target = event.target, 22 classList = target.classList, 23 currentTarget, addRateTextNode, rate, changedRate; 24 25 if (classList.contains('up')) { 26 changedRate = 5; 27 } else if (classList.contains('down')) { 28 changedRate = -5; 29 } else { 30 return; 31 } 32 33 currentTarget = event.currentTarget; 34 addRateTextNode = currentTarget.querySelector('.add-rate').firstChild; 35 addRateTextNode.data = rate = +addRateTextNode.data + changedRate; 36 currentTarget.querySelector('.number').firstChild.data = this.baseNumber * (100 + rate) / 100; 37}); 38</script>

論理構造

数字がh1要素でマークアップされているのは構造上おかしいと思うので、構造を見直すと良いと思います。
下記はform要素でマークアップした例です。

投稿2017/04/24 17:56

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/02 02:07

返信遅れて申し訳ありません。 まさに自分がやりたいことが実装でき大変感謝しています。 特に複数の要素に適用させる部分において大変勉強になりました。 本当にありがとうございます。
guest

0

元の値を保存しておけば良いと思います。

適した方法かわかりませんが、今回は関数の中に保管しておく手法(クロージャ?)を使っています。値を保管するのが関数の中だけになるので、変数が減ってよいと(個人的には)思います。

javascript

1$(function() { 2 var ChangeRate = function(targetVal, targetRate) { 3 //関数作成時に元の値を保管する 4 var base = parseInt($(targetVal).text()); 5 var rate = parseInt($(targetRate).text()); 6 7 //増加量を指定して値を変更する関数を返す。 8 return function(r) { 9 rate = rate + r; 10 $(targetVal).text(base * (100 + rate) / 100); 11 $(targetRate).text(rate); 12 }; 13 }; 14 15 var changeBase01 = ChangeRate('.base_01', '.percent_01'); 16 $('.up_01').on('click', function(){changeBase01(5);}); 17 $('.down_01').on('click', function(){changeBase01(-5);}); 18 19 var changeBase02 = ChangeRate('.base_02', '.percent_02'); 20 $('.up_02').on('click', function(){changeBase02(5);}); 21 $('.down_02').on('click', function(){changeBase02(-5);}); 22});

投稿2017/04/24 08:59

iwamoto_takaaki

総合スコア2883

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/02 02:12

返信遅れて申し訳ありません。 コードが大変わかりやすく書かれていたので、 初心者な私でもなんとか読み解くことができました。 本当にありがとうございます。
guest

0

そもそも数学的に
150000に10%足すのと、150000に5%を2回足すのと答えが異なりますよ。

x * 1.05 * 1.05
= x * 1.1025
!= x * 1.1

普通に基準値をtype="hidden"のinputやらjqueryのdata apiなどに入れるなりなんなりで、保持した上で共通化処理しましょう。(もっと綺麗に描きたいならClassを勉強しましょう!方法は様々です。)

投稿2017/04/24 07:14

編集2017/04/24 07:22
Everatch

総合スコア241

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/02 02:15

返信遅れて申し訳ありません。 数学的な部分とClassの部分の両方が勉強不足でした。 基本的な数学とData apiは使ったことがないのでこれを機に勉強してみます。 ご回答ありがとうございます。
guest

0

classをupとdownにしてdataとidで処理する
https://jsfiddle.net/4gky9faw/3/

javascript

1$(function() { 2 $('.up').on('click',function(){ 3 base_id = $(this).data('id'); 4 count_id = $(this).data('percent') 5 count = parseInt($("#"+count_id).text()); 6 baseNum = parseInt($("#"+base_id).data("num")); 7 count = parseInt(count) + 5; 8 baseNum = baseNum + (baseNum * (count/100)); 9 $("#"+base_id).text(baseNum); 10 $("#"+count_id).text(count); 11 }); 12 13 $('.down').on('click',function(){ 14 base_id = $(this).data('id'); 15 count_id = $(this).data('percent') 16 count = parseInt($("#"+count_id).text()); 17 baseNum = parseInt($("#"+base_id).data("num")); 18 count = count - 5; 19 baseNum = baseNum + (baseNum * (count/100)); 20 $("#"+base_id).text(baseNum); 21 $("#"+count_id).text(count); 22 }); 23});

html

1<div class="wrapper"> 2 <section> 3 <h1 id="base_01" data-num="150000">150000</h1> 4 <p class="up" data-id="base_01" data-percent="percent_01"></p> 5 <p> 6 <span id="percent_01">0</span> 7 % 8 </p> 9 <p class="down" data-id="base_01" data-percent="percent_01"></p> 10 </section> 11 <section> 12 <h1 id="base_02" data-num="375000">375000</h1> 13 <p class="up" data-id="base_02" data-percent="percent_02"></p> 14 <p> 15 <span id="percent_02">0</span> 16 % 17 </p> 18 <p class="down" data-id="base_02" data-percent="percent_02"></p> 19 </section> 20</div>

投稿2017/04/24 09:10

date

総合スコア1820

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/02 02:10

返信遅れて申し訳ありません。 この方法でも自分がやりたいことが実装できました。 data属性は使ったことがなかったのですが、これをきに勉強してみようと思います。 本当にありがとうございます。
guest

0

150000を引いて150000で割って残り数字に0.05を足して150000をかけてそれに150000足すとか?

リンク内容
やってて思った。これって7500の上下をすればいいだけなんじゃないかなと。

投稿2017/04/24 06:59

編集2017/04/24 07:59
toutou

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/02 02:20

返信遅れて申し訳ありません。 なるほど。そのような方法もあったのですね。勉強になります。 これを機に数学全般を勉強し直してみます。 本当にありがとうございます。
guest

0

あなたの言っている通り、基準の数値は変更せず計算し、結果用にもう1つ枠を設けた方がよいでしょう。

一応、逆算して基準を求め、再計算することは、端数がでなければ可能ですが
お勧めしません。
$('.up_01').on('click',function(){
baseNum01 = parseInt($('.base_01').text());
baseNum01 = baseNum01 * 100 / (100 + count01 );
count01 = count01 + 5;
baseNum01 = baseNum01 * (100 + count01 ) / 100;
$('.base_01').text(baseNum01);
$('.percent_01').text(count01);
});

投稿2017/04/24 08:50

tmp

総合スコア277

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

owl

2017/05/02 02:18

返信遅れて申し訳ありません。 わざわざコードを描いていただきありがとうございます。 数学が苦手なのですが逆算して基準を求める方法はこれかする可能性が出てくるので、 勉強してみようと思います。 本当にありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問