jQueryの　選択された商品の合計を表示

hmtl
1
2
3<!DOCTYPE html>
4<html>
5<head>
6<meta charset="utf-8">
7<title>jquery</title>
8<link rel="stylesheet" href="style1.css">
9</head>
10<body>
11
12	<div class="form-box">
13
14		<p class="buy_itemu_menu" data-price="2500">
15			人力飛行機 <span class="kakaku">(定価 2,500円 / 会員価格 2,300円 )</span>
16		</p>
17
18		<select name="人力飛行機数量" style="width: 150px;">
19
20			<option data-num="0" value="0個" selected>0個</option>
21			<option data-num="1" value="1個">1個</option>
22			<option data-num="2" value="2個">2個</option>
23			<option data-num="3" value="3個">3個</option>
24		</select>
25	</div>
26
27
28
29	<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
30	<script>
31
32	("select","#kaiinnkakaku").change(function()){
33
34		var hairetu = [];
35		for(var i = 0;i < $(".buy_itemu_menu").length; i++ ){
36
37			var item_price =$("buy.item.menu").eq(i).data("price");
38			var  item_select = $(".buy_itemu_menu").eq(i).next("select").find("option:selected").data("num");
39
40
41			 hairetu.push(item_price * item_select);
42		}
43
44
45	}
46</script>
47</body>
48</html>
49
50

jQueryの　選択された商品の合計を表示させたいのですが

$(".buy_itemu_menu").eq(i).next("select").find("option:selected").data("num");

この部分のコードがリファレンスを見たのですが理解できなかったので教えて頂けると助かります。

$(".buy_itemu_menu") クラスの.　eq(i)　何番目の　　.next("select")　←この辺りから理解できておりません。

yasutomi

2019/05/21 01:37 編集

1行目の「コード」と破線(---------)は削除をお願いします。 ("select","#kaiinnkakaku")も正しくは$("select","#kaiinnkakaku")なので正しく動作するコードに修正をお願いします。

m.ts10806

2019/05/21 00:07

そういえば、kaiinnkakakuとIDのついた要素はどこにもないので再現不可ですね。タイトルと質問内容（聞きたいこと）が合ってないのも調整いただきたく。私は「聞きたいこと」のみに対して回答しています。

m.ts10806

2019/05/21 21:34

解決済みは良いのですが、どのように解決されたのでしょうか？理解したことも含めて回答にコメントください。

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

回答3件

javascript
1
2
3for (var i = 0; i < $(".buy_itemu_menu").length; i++) {
4
5var item_price = $(".buy_itemu_menu").eq(i).data(
6"price");
7var item_select = $(".buy_itemu_menu").eq(i).next(
8"select").find("option:selected").data("num");
9
10hairetu.push(item_price *item_select);
11
12var a = $(".buy_itemu_menu");
13console.log(a);
14
15var b = a.eq(i);
16console.log(b);
17
18var c = b.next("select");
19console.log(c);
20
21var d = c.find("option:selected");
22console.log(d);
23var e = d.data("num")；	console.log(e);
24}
25

for文の中に記載して実行してみました。
chromeのデベロッパーツールでconsole.logで中身を確認してみました。

中身を確認してみて
$(".buy_itemu_menu") クラスの.　eq(i)　何番目の　　.next("select")
select要素の　.find("option:selected")　選択されたoptionの　.data("num");　データ属性の要素　だと理解しました。

html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>jquery</title>
6<link rel="stylesheet" href="style1.css">
7</head>
8<body>
9
10	<div id="wrapper">
11
12		<h1 id="h1">フォーム自動計算</h1>
13
14
15		<form class="form-horizon" method="post" action="">
16			<p>ご希望の項目の数を選択してください</p>
17
18			<div class="form-box">
19
20				<p class="buy_itemu_menu" data-price="2500">
21					人力飛行機 <span class="kakaku">(定価 2,500円 / 会員価格 2,300円 )</span>
22				</p>
23
24				<select name="人力飛行機数量" style="width: 150px;">
25
26					<option data-num="0" value="0個" selected>0個</option>
27					<option data-num="1" value="1個">1個</option>
28					<option data-num="2" value="2個">2個</option>
29					<option data-num="3" value="3個">3個</option>
30				</select>
31			</div>
32
33			<div class="form-box">
34
35				<p class="buy_itemu_menu" data-price="1000">
36					ラーメン <span class="kakaku">(定価 1,000円 / 会員価格 8,00円 )</span>
37				</p>
38
39				<select name="人力飛行機数量" style="width: 150px;">
40
41					<option data-num="0" value="0個" selected>0個</option>
42					<option data-num="1" value="1個">1個</option>
43					<option data-num="2" value="2個">2個</option>
44					<option data-num="3" value="3個">3個</option>
45				</select>
46			</div>
47
48
49			<div class="form-box">
50
51				<p class="buy_itemu_menu" data-price="10000">
52					時計 <span class="kakaku">(定価 10,000円 / 会員価格 9,500円 )</span>
53				</p>
54
55				<select name="人力飛行機数量" style="width: 150px;">
56
57					<option data-num="0" value="0個" selected>0個</option>
58					<option data-num="1" value="1個">1個</option>
59					<option data-num="2" value="2個">2個</option>
60					<option data-num="3" value="3個">3個</option>
61				</select>
62			</div>
63
64
65		<hr>
66		<div class="form-box">
67			<label for="item_price_total">小計:</label> <input
68				id="item_price_total" name="小計" value="0円" readonly>
69		</div>
70
71		<div class="form-box">
72			<label for="postage_price">送料：</label> <input id="postage_price"
73				class="" name="送料" value="300円" readonly> <span>※1発送につき300円（3,000円以上のご購入で送料無料）</span>
74		</div>
75
76
77	<div class="form-box">
78		<label for="total_price">合計金額：</label> <input id="total_price"
79			class="" name="合計金額" value="300円"
80			style="font-size: 150%; font-weight: bold; display: inline-block;"
81			readonly>
82		<div>
83		<label for="kaiinnkakaku">
84                        <input id="kaiinnkakaku" type="checkbox" name="会員価格" value="チェック有">
85                            会員の方はチェックしてください。会員価格に変更されます。
86                        </label>
87
88		</div>
89
90	</div>
91
92		<div class="submit-form">
93		<button id="form-check" type="submit" class="btn">送信(されません)</button>
94		</div>
95		</form>
96
97
98</div>
99<footer id = "footer">
100<small class="copyright">footer</small>
101</footer>
102
103
104
105	<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
106	<script>
107
108				$(function() {
109$("select,#kaiinnkakaku").change(function(){
110					var hairetu = [];
111					for (var i = 0; i < $(".buy_itemu_menu").length; i++) {
112
113						var item_price = $(".buy_itemu_menu").eq(i).data(
114								"price");
115						var item_select = $(".buy_itemu_menu").eq(i).next(
116								"select").find("option:selected").data("num");
117
118								if(document.getElementById("kaiinnkakaku").checked == true){
119  								if(item_price == 10000){
120
121										  var item_price = 9500
122									}else if(item_price == 2500){
123										 var item_price = 2300
124									}else if (item_price == 1000)
125									var item_price = 800
126								}
127
128								if(item_select > 0){
129
130	hairetu.push(item_price * item_select);
131
132}else{
133	0;
134}
135
136
137		/*				var a = $(".buy_itemu_menu");
138						console.log(a);
139
140						var b = a.eq(i);
141						console.log(b);
142
143						var c = b.next("select");
144						console.log(c);
145
146						var d = c.find("option:selected");
147						console.log(d);
148
149						var e = d.data("num");
150						console.log(e);
151*/
152					}
153
154					var total = 0;
155					for (var j = 0; j < hairetu.length; j++) {
156						total += hairetu[j];
157
158					}
159
160					if(total >= 3000){
161        var postage = 0;
162
163			}else{
164var postage = 300;
165
166			}
167
168					$("#item_price_total").val(total + "円");
169					    $("#postage_price").val(postage + "円");
170							   $("#total_price").val((total + postage) + "円");
171				});
172
173});
174</script>
175</body>
176</html>
177

上記のコードでなんとか
jQueryの　選択された商品の合計を表示　することができました。

投稿2019/05/24 06:04

編集2019/05/24 06:16

kokok

総合スコア145

m.ts10806

2019/05/24 06:06

すごく細かいところで申し訳ないですが、最初のコードブロックの言語のところ、HTMLではなくJavaScriptですね（jsと入れてもちゃんと反映されますが）

kokok

2019/05/24 06:12

指摘ありがとうございます。　以後気を付けます。

m.ts10806

2019/05/24 06:13

質問も回答も編集できますよ。

kokok

2019/05/24 06:17

編集できました。ありがとうございます。

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

ベストアンサー

チェーンメソッドは「実行結果をもって次の処理へ」いくので、
1個1個分解してどういう情報が取れているか確認していくと良いです。

$(".buy_itemu_menu").eq(i).next("select").find("option:selected").data("num")

js
1var a = $(".buy_itemu_menu");
2console.log(a);
3
4var b = a.eq(i);
5console.log(b);
6
7var c = b.next("select");
8console.log(c);
9
10var d = c.find("option:selected");
11console.log(d);
12
13var e = d.data("num");
14console.log(e);
15

投稿2019/05/20 15:41

m.ts10806

総合スコア80850

kokok

2019/05/23 16:00

回答いただいたコードを for (var i = 0; i < $(".buy_itemu_menu").length; i++) { var item_price = $(".buy_itemu_menu").eq(i).data( "price"); var item_select = $(".buy_itemu_menu").eq(i).next( "select").find("option:selected").data("num"); hairetu.push(item_price *item_select); var a = $(".buy_itemu_menu"); console.log(a); var b = a.eq(i); console.log(b); var c = b.next("select"); console.log(c); var d = c.find("option:selected"); console.log(d); var e = d.data("num")； console.log(e); } for文の中に記載して実行してみました。 chromeのデベロッパーツールでconsole.logで中身を確認してみました。中身を確認してみて $(".buy_itemu_menu") クラスの.　eq(i)　何番目の　　.next("select") select要素の　.find("option:selected")　選択されたoptionの　.data("num");　データ属性の要素　だと理解しました。間違っていたらアドバイス頂けると助かります。

kokok

2019/05/23 16:02

回答もMarkdown記法使った方が良かったですね。申し訳ございません。

m.ts10806

2019/05/23 20:45

コメント欄ではマークダウン使えませんので質問に追記いただけたらと。ただ、解決されたようですが、結局どうなったのでしょうか？

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

.buy_item_menuのdata-priceの値と、その次にあるselectの値をかけて
配列に落とし込むのですよね？

せっかくselectなのでdata-numではなくvalueで持った方が良いと思いますが・・・

処理的にはこう

javascript
1<script>
2$(function(){
3  $('.form-box select').on('change',function(){
4    var hairetu=$('.buy_item_menu').map(function(){
5      var p=parseInt($(this).data('price'));
6      var n=parseInt($(this).next('select').find('option:selected').data('num'));
7      //var n=parseInt($(this).next('select').val());
8
9      return p*n;
10    }).get();
11    console.log(hairetu);
12  });
13});
14</script>
15<div class="form-box">
16  <p class="buy_item_menu" data-price="2500">
17     hoge <span class="kakaku">定価 2,500円</span>
18  </p>
19  <select name="hoge">
20    <option data-num="0" value="0" selected>0個</option>
21    <option data-num="1" value="1">1個</option>
22    <option data-num="2" value="2">2個</option>
23    <option data-num="3" value="3">3個</option>
24  </select>
25  <p class="buy_item_menu" data-price="4000">
26     fuga <span class="kakaku">定価 4,000円</span>
27  </p>
28  <select name="fuga">
29    <option data-num="0" value="0" selected>0個</option>
30    <option data-num="1" value="1">1個</option>
31    <option data-num="2" value="2">2個</option>
32    <option data-num="3" value="3">3個</option>
33  </select>
34  <p class="buy_item_menu" data-price="7500">
35     piyo <span class="kakaku">定価 7,500円</span>
36  </p>
37  <select name="piyo">
38    <option data-num="0" value="0" selected>0個</option>
39    <option data-num="1" value="1">1個</option>
40    <option data-num="2" value="2">2個</option>
41    <option data-num="3" value="3">3個</option>
42  </select>
43</div>