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

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

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

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

jQuery

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

Q&A

解決済

2回答

856閲覧

【jQuery】数量に応じて送料を変えたい

hit-machine

総合スコア12

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/12/26 05:06

編集2018/12/26 05:14

前提・実現したいこと

セレクトボックスで数を選択し、その合計数によって、
表示される送料を変えたいです。
1〜10枚までは850円
11〜15枚までは1000円
16枚〜1200円

発生している問題・エラーメッセージ

if文の書き方が悪いのか、書く場所が悪いのか分からず、
選択をしても送料の表示が変わりません。

該当のソースコード

html

1<label class="color"><input type="checkbox" name="color" value="color"></label> 2 <select class="parent" name="size"> 3 <option value="" class="msg" selected>サイズを選択</option> 4 <option value="S">S:600円</option> 5 <option value="L">L:900円</option> 6 </select> 7 <select class="children" name="number"> 8 <option value="0" class="msg" selected>0</option> 9 <option value="1">1</option> 10 <option value="2">2</option> 11 <option value="3">3</option> 12 <option value="4">4</option> 13 </select><br> 14<label class="color"><input type="checkbox" name="color" value="color"></label> 15 <select class="parent" name="size"> 16 <option value="" class="msg" selected>サイズを選択</option> 17 <option value="S">S:600円</option> 18 <option value="L">L:900円</option> 19 </select> 20 <select class="children" name="number"> 21 <option value="0" class="msg" selected>0</option> 22 <option value="1">1</option> 23 <option value="2">2</option> 24 <option value="3">3</option> 25 <option value="4">4</option> 26 </select><br> 27<label class="color"><input type="checkbox" name="color" value="color"></label> 28 <select class="parent" name="size"> 29 <option value="" class="msg" selected>サイズを選択</option> 30 <option value="S">S:600円</option> 31 <option value="L">L:900円</option> 32 </select> 33 <select class="children" name="number"> 34 <option value="0" class="msg" selected>0</option> 35 <option value="1">1</option> 36 <option value="2">2</option> 37 <option value="3">3</option> 38 <option value="4">4</option> 39 </select><br> 40<label class="color"><input type="checkbox" name="color" value="color"></label> 41 <select class="parent" name="size"> 42 <option value="" class="msg" selected>サイズを選択</option> 43 <option value="S">S:600円</option> 44 <option value="L">L:900円</option> 45 </select> 46 <select class="children" name="number"> 47 <option value="0" class="msg" selected>0</option> 48 <option value="1">1</option> 49 <option value="2">2</option> 50 <option value="3">3</option> 51 <option value="4">4</option> 52 </select><br> 53<label class="color"><input type="checkbox" name="color" value="color"></label> 54 <select class="parent" name="size"> 55 <option value="" class="msg" selected>サイズを選択</option> 56 <option value="S">S:600円</option> 57 <option value="L">L:900円</option> 58 </select> 59 <select class="children" name="number"> 60 <option value="0" class="msg" selected>0</option> 61 <option value="1">1</option> 62 <option value="2">2</option> 63 <option value="3">3</option> 64 <option value="4">4</option> 65 </select><br> 66以下続きます。。。

js

1$(function(){ 2 $('[name=color]').on('change',function(){ 3 $(this).closest('label').nextAll('.parent:eq(0),.children:eq(0)').prop('disabled',!$(this).prop('checked')); 4 }).trigger('change'); 5 $(':checkbox,select').on('change click',function(){ 6 var p_s=600; 7 var p_l=900; 8 var n_s=0; 9 var n_l=0; 10 if(1<= (n_s+n_l) <= 10) { 11 var souryo = 850; 12 } else if(11<= (n_s+n_l) <= 15){ 13 var souryo = 1000; 14 } else if(16<= (n_s+n_l) <= 40){ 15 var souryo = 1200; 16 } 17 18 $('.parent:not(:disabled):not(:has(option[value=""]:selected))').each(function(){ 19 if($(this).val()=="S") n_s+=parseInt($(this).next('.children').val()); 20 if($(this).val()=="L") n_l+=parseInt($(this).next('.children').val()); 21 }); 22 $('.s.maisu').text(n_s); 23 $('.l.maisu').text(n_l); 24 $('.souryo').text(souryo); 25 $('.s.kingaku').text(n_s*p_s); 26 $('.l.kingaku').text(n_l*p_l); 27 $('.all.kingaku').text(n_s*p_s+n_l*p_l+((n_s>0||n_l>0)?souryo:0)); 28 }).eq(0).trigger('change'); 29});

試したこと

条件を2つにしても変化はありませんでした。

js

1if(1<= (n_s+n_l) <= 10) { 2 var souryo = 850; 3 } else { 4 var souryo = 1000; 5 }

補足情報

すみませんが、どなたかお力をお貸し頂けますと幸いにございます。
よろしくお願い致します。

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

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

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

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

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

m.ts10806

2018/12/26 05:10

「条件を2つにしても」とは具体的にどのように書かれたのでしょうか。
m.ts10806

2018/12/26 05:13

というか提示されているコードは変数未定義エラーが出ているのでそこは修正いただきたく。 > Uncaught ReferenceError: n_a is not defined
hit-machine

2018/12/26 05:13

コメントありがとうございます。 コードを追加致しました。
hit-machine

2018/12/26 05:14

失礼しました。修正いたしました。
m.ts10806

2018/12/26 05:15

.s.maisuとか.all.kingakuとか.text()利用されている元のHTMLの要素も提示いただけますか? 再現確認がとれません。
hit-machine

2018/12/26 05:24

不備があり、すみません。 お時間取らせてしまい大変恐縮ですが、 解決いたしましたので、お詫び申し上げます。 すみませんでした。 また分からない事があればお願い致します!
m.ts10806

2018/12/26 05:28

本当に解決したのか分からないのでyambejpさんは冒頭であのように書かれているのだと思います。 「解決しました」だけだと「コピペコードで満足しました」とイコールです。 ご自身の理解したところを具体的に書くようにしてください。もし回答についたコードでわからなかったらわかるまで回答者に確認してください。
hit-machine

2018/12/26 05:46

ご指摘ありがとうございます。 まず、var souryo が重複していた(というかそもそもが間違っていました) 条件の書き方、書く場所も理解いたしました。 ありがとうございました。
m.ts10806

2018/12/26 05:47

回答者のコメントにぶらさげてください。ここはあくまで質問に対する確認や指摘コメント欄です。
hit-machine

2018/12/26 05:48

重ね重ね申し訳ございません。
guest

回答2

0

javascript

1 if(1<= (n_s+n_l) <= 10) { 2 var souryo = 850; 3 } else if(11<= (n_s+n_l) <= 15){ 4 var souryo = 1000; 5 } else if(16<= (n_s+n_l) <= 40){ 6 var souryo = 1200; 7 }

上記の部分でsouryoが複数回宣言されています。
下記のように宣言は1回のみにしてください。

javascript

1 var souryo = 0; 2 if(1<= (n_s+n_l) <= 10) { 3 souryo = 850; 4 } else if(11<= (n_s+n_l) <= 15){ 5 souryo = 1000; 6 } else if(16<= (n_s+n_l) <= 40){ 7 souryo = 1200; 8 }

投稿2018/12/26 05:15

編集2018/12/26 05:17
runny_nose

総合スコア280

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

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

hit-machine

2018/12/26 05:23

ご回答ありがとうございます。 何分初心者なもので、スコープもよく分かっていない状態です。 調べて勉強してきます。ありがとうございます!
guest

0

ベストアンサー

こういうのは前の質問に続けて書いたほうがいいですよ

javascript

1<script> 2$(function(){ 3 $('[name=color]').on('change',function(){ 4 $(this).closest('label').nextAll('.parent:eq(0),.children:eq(0)').prop('disabled',!$(this).prop('checked')); 5 }).trigger('change'); 6 $(':checkbox,select').on('change click',function(){ 7 var souryo=0; 8 var p_s=600; 9 var p_l=900; 10 var n_s=0; 11 var n_l=0; 12 $('.parent:not(:disabled):not(:has(option[value=""]:selected))').each(function(){ 13 if($(this).val()=="S") n_s+=parseInt($(this).next('.children').val()); 14 if($(this).val()=="A") n_l+=parseInt($(this).next('.children').val()); 15 }); 16 $('.s.maisu').text(n_s); 17 $('.l.maisu').text(n_l); 18 $('.s.kingaku').text(n_s*p_s); 19 $('.l.kingaku').text(n_l*p_l); 20 if(n_s+n_l>=16){ 21 souryo=1200; 22 }else if(n_s+n_l>=11){ 23 souryo=1000; 24 }else if(n_s+n_l>=1){ 25 souryo=850; 26 } 27 $('.souryo').text(souryo); 28 $('.all.kingaku').text(n_s*p_s+n_l*p_l+souryo); 29 }).eq(0).trigger('change'); 30}); 31</script> 32<label class="color"><input type="checkbox" name="color" value="color01"></label> 33<select class="parent" name="size01"> 34 <option value="" class="msg" selected>サイズを選択</option> 35 <option value="S">S600</option> 36 <option value="A">L900</option> 37</select> 38<select class="children" name="number01"> 39 <option value="0" class="msg" selected>0</option> 40 <option value="1">1</option> 41 <option value="2">2</option> 42 <option value="3">3</option> 43 <option value="4">4</option> 44 </select><br> 45<label class="color"><input type="checkbox" name="color" value="color02"></label> 46<select class="parent" name="size02"> 47 <option value="" class="msg" selected>サイズを選択</option> 48 <option value="S">S600</option> 49 <option value="A">L900</option> 50</select> 51<select class="children" id="number02" name="number02"> 52 <option value="0" selected>0</option> 53 <option value="1">1</option> 54 <option value="2">2</option> 55 <option value="3">3</option> 56 <option value="4">4</option> 57</select><br> 58<label class="color"><input type="checkbox" name="color" value="color03"></label> 59<select class="parent" name="size02"> 60 <option value="" class="msg" selected>サイズを選択</option> 61 <option value="S">S600</option> 62 <option value="A">L900</option> 63</select> 64<select class="children" id="number02" name="number02"> 65 <option value="0" selected>0</option> 66 <option value="1">1</option> 67 <option value="2">2</option> 68 <option value="3">3</option> 69 <option value="4">4</option> 70</select><br> 71<label class="color"><input type="checkbox" name="color" value="color04"></label> 72<select class="parent" name="size02"> 73 <option value="" class="msg" selected>サイズを選択</option> 74 <option value="S">S600</option> 75 <option value="A">L900</option> 76</select> 77<select class="children" name="number02"> 78 <option value="0" selected>0</option> 79 <option value="1">1</option> 80 <option value="2">2</option> 81 <option value="3">3</option> 82 <option value="4">4</option> 83</select><br> 84<label class="color"><input type="checkbox" name="color" value="color05"></label> 85<select class="parent" name="size02"> 86 <option value="" class="msg" selected>サイズを選択</option> 87 <option value="S">S600</option> 88 <option value="A">L900</option> 89</select> 90<select class="children" name="number02"> 91 <option value="0" selected>0</option> 92 <option value="1">1</option> 93 <option value="2">2</option> 94 <option value="3">3</option> 95 <option value="4">4</option> 96</select><br> 97<label class="color"><input type="checkbox" name="color" value="color06"></label> 98<select class="parent" name="size02"> 99 <option value="" class="msg" selected>サイズを選択</option> 100 <option value="S">S600</option> 101 <option value="A">L900</option> 102</select> 103<select class="children" name="number02"> 104 <option value="0" selected>0</option> 105 <option value="1">1</option> 106 <option value="2">2</option> 107 <option value="3">3</option> 108 <option value="4">4</option> 109</select> 110<div id="result"> 111Sサイズ:合計<span class="s maisu">0</span>枚 × 600円 = <span class="s kingaku">0</span><br> 112Lサイズ:合計<span class="l maisu">0</span>枚 × 900円 = <span class="l kingaku">0</span><br> 113送料:<span class="souryo">0</span>(10:850,15:1000,16枚~:1200)<br> 114合計:<span class="all kingaku">0</span>115</div>

投稿2018/12/26 05:17

yambejp

総合スコア114572

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

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

hit-machine

2018/12/26 05:21

昨日に続き、ありがとうございます! 前の質問に続けて書けるのですね。 今後気をつけます!ありがとうございました!
yambejp

2018/12/26 05:27

ちなみに 1<= (n_s+n_l) <= 10 のような処理は絶対にしてはいけません この評価順は 「1<= (n_s+n_l) 」をまず行い真なら1、偽なら0を返しますので 「1<= 10」または「0<=10」を評価し常にこれは真になります 1<= (n_s+n_l) && (n_s+n_l) <= 10 というような評価をしてください
hit-machine

2018/12/26 05:31

なるほど、勉強になります。 ちなみに、条件を数の大きい順に書いているのは、 ●枚以上というのを絞るためでしょうか?
yambejp

2018/12/26 05:33

> 条件を数の大きい順 これは0枚のとき0円と最初に宣言してあるからです
hit-machine

2018/12/26 05:37

ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問