teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問javascript(jquery)で生成した各要素に対して、jsonの値を持たせたい

編集履歴

質問編集履歴

7

コード修正

2018/10/26 05:31

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -30,9 +30,9 @@
30
30
 
31
31
 
32
32
 
33
- 1つめの要素のdata属性には、(json["stone_01"]["data"])を持たせ、
33
+ 1つめの要素のdata属性には、(json["stone_01"]["price"])を持たせ、
34
-
34
+
35
- 2つめの要素のdata属性には、(json["stone_02"]["data"])を......
35
+ 2つめの要素のdata属性には、(json["stone_02"]["price"])を......
36
36
 
37
37
 
38
38
 

6

コード修正

2018/10/26 05:31

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -8,15 +8,15 @@
8
8
 
9
9
  --------- jsで以下を生成 ---------
10
10
 
11
- <input type="radio" data-price="0">
11
+ <input type="radio" data-price="">
12
-
12
+
13
- <input type="radio" data-price="0">
13
+ <input type="radio" data-price="">
14
-
14
+
15
- <input type="radio" data-price="0">
15
+ <input type="radio" data-price="">
16
-
16
+
17
- <input type="radio" data-price="0">
17
+ <input type="radio" data-price="">
18
-
18
+
19
- <input type="radio" data-price="0">
19
+ <input type="radio" data-price="">
20
20
 
21
21
  .
22
22
 
@@ -30,9 +30,9 @@
30
30
 
31
31
 
32
32
 
33
- 1つめの要素のdata属性には、(json["data_01"]["data"])を持たせ、
33
+ 1つめの要素のdata属性には、(json["stone_01"]["data"])を持たせ、
34
-
34
+
35
- 2つめの要素のdata属性には、(json["data_02"]["data"])を......
35
+ 2つめの要素のdata属性には、(json["stone_02"]["data"])を......
36
36
 
37
37
 
38
38
 
@@ -66,7 +66,7 @@
66
66
 
67
67
  for (var i = 1; i <= 10; i++) {
68
68
 
69
- $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price="0"><img src="" alt=""></label>')
69
+ $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price=""><img src="" alt=""></label>')
70
70
 
71
71
  .addClass('color-' + i.toString())
72
72
 

5

jsonコードを記入

2018/10/26 04:43

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -44,6 +44,8 @@
44
44
 
45
45
 
46
46
 
47
+ ■js
48
+
47
49
  ```ここに言語を入力
48
50
 
49
51
  function create_input() {
@@ -101,3 +103,157 @@
101
103
  create_input();
102
104
 
103
105
  ```
106
+
107
+
108
+
109
+ ■json
110
+
111
+ ```ここに言語を入力
112
+
113
+ {
114
+
115
+ "stone_01": {
116
+
117
+ "type": "hogehogeType",
118
+
119
+ "name_en": "hogehoge",
120
+
121
+ "name_jp": "テキスト",
122
+
123
+ "price": "50,000",
124
+
125
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
126
+
127
+ },
128
+
129
+ "stone_02": {
130
+
131
+ "type": "hogehogeType",
132
+
133
+ "name_en": "hogehoge",
134
+
135
+ "name_jp": "テキスト",
136
+
137
+ "price": "50,000",
138
+
139
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
140
+
141
+ },
142
+
143
+ "stone_03": {
144
+
145
+ "type": "hogehogeType",
146
+
147
+ "name_en": "hogehoge",
148
+
149
+ "name_jp": "テキスト",
150
+
151
+ "price": "50,000",
152
+
153
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
154
+
155
+ },
156
+
157
+ "stone_04": {
158
+
159
+ "type": "hogehogeType",
160
+
161
+ "name_en": "hogehoge",
162
+
163
+ "name_jp": "テキスト",
164
+
165
+ "price": "50,000",
166
+
167
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
168
+
169
+ },
170
+
171
+ "stone_05": {
172
+
173
+ "type": "hogehogeType",
174
+
175
+ "name_en": "hogehoge",
176
+
177
+ "name_jp": "テキスト",
178
+
179
+ "price": "50,000",
180
+
181
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
182
+
183
+ },
184
+
185
+ "stone_06": {
186
+
187
+ "type": "hogehogeType",
188
+
189
+ "name_en": "hogehoge",
190
+
191
+ "name_jp": "テキスト",
192
+
193
+ "price": "50,000",
194
+
195
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
196
+
197
+ },
198
+
199
+ "stone_07": {
200
+
201
+ "type": "hogehogeType",
202
+
203
+ "name_en": "hogehoge",
204
+
205
+ "name_jp": "テキスト",
206
+
207
+ "price": "50,000",
208
+
209
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
210
+
211
+ },
212
+
213
+ "stone_08": {
214
+
215
+ "type": "hogehogeType",
216
+
217
+ "name_en": "hogehoge",
218
+
219
+ "name_jp": "テキスト",
220
+
221
+ "price": "50,000",
222
+
223
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
224
+
225
+ },
226
+
227
+ "stone_09": {
228
+
229
+ "type": "hogehogeType",
230
+
231
+ "name_en": "hogehoge",
232
+
233
+ "name_jp": "テキスト",
234
+
235
+ "price": "50,000",
236
+
237
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
238
+
239
+ },
240
+
241
+ "stone_10": {
242
+
243
+ "type": "hogehogeType",
244
+
245
+ "name_en": "hogehoge",
246
+
247
+ "name_jp": "テキスト",
248
+
249
+ "price": "50,000",
250
+
251
+ "mean": "テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト"
252
+
253
+ }
254
+
255
+ }
256
+
257
+
258
+
259
+ ```

4

インデント修正

2018/10/26 04:29

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -60,35 +60,35 @@
60
60
 
61
61
  .then(
62
62
 
63
- function (json) {
63
+ function(json) {
64
64
 
65
- for (var i = 1; i <= 10; i++) {
65
+ for (var i = 1; i <= 10; i++) {
66
66
 
67
- $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price="0"><img src="" alt=""></label>')
67
+ $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price="0"><img src="" alt=""></label>')
68
68
 
69
- .addClass('color-' + i.toString())
69
+ .addClass('color-' + i.toString())
70
70
 
71
- .attr('for', 'left-input-' + i.toString())
71
+ .attr('for', 'left-input-' + i.toString())
72
72
 
73
- .appendTo('.left-input-set')
73
+ .appendTo('.left-input-set')
74
74
 
75
- .find('input')
75
+ .find('input')
76
76
 
77
- .attr('id', 'left-input-' + i.toString())
77
+ .attr('id', 'left-input-' + i.toString())
78
78
 
79
- .val('left_' + i.toString())
79
+ .val('left_' + i.toString())
80
80
 
81
- .next('img')
81
+ .next('img')
82
82
 
83
- .attr('src', '/assets/img/l_select_' + i.toString() + '.png')
83
+ .attr('src', '/assets/img/l_select_' + i.toString() + '.png')
84
84
 
85
- .addClass('input_img');
85
+ .addClass('input_img');
86
86
 
87
- }
87
+ }
88
88
 
89
89
  },
90
90
 
91
- function () {
91
+ function() {
92
92
 
93
93
  alert('再読み込みをして下さい。');
94
94
 

3

誤植

2018/10/26 04:26

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,7 @@
40
40
 
41
41
 
42
42
 
43
- 直接、値を書き換えたら済む話ですが、宜しくお願い致します。
43
+ 1つずつ直接、inputのdataに値を流し込めば済む話ですが、宜しくお願い致します。
44
44
 
45
45
 
46
46
 

2

コードを記入致しました。

2018/10/26 04:23

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -41,3 +41,63 @@
41
41
 
42
42
 
43
43
  直接、値を書き換えたら済む話ですが、宜しくお願い致します。
44
+
45
+
46
+
47
+ ```ここに言語を入力
48
+
49
+ function create_input() {
50
+
51
+ $.ajax({
52
+
53
+ type: 'GET',
54
+
55
+ url: 'items.json',
56
+
57
+ dataType: 'json'
58
+
59
+ })
60
+
61
+ .then(
62
+
63
+ function (json) {
64
+
65
+ for (var i = 1; i <= 10; i++) {
66
+
67
+ $('<label for=""><input type="radio" name="left_input" id="" class="left_radio" data-price="0"><img src="" alt=""></label>')
68
+
69
+ .addClass('color-' + i.toString())
70
+
71
+ .attr('for', 'left-input-' + i.toString())
72
+
73
+ .appendTo('.left-input-set')
74
+
75
+ .find('input')
76
+
77
+ .attr('id', 'left-input-' + i.toString())
78
+
79
+ .val('left_' + i.toString())
80
+
81
+ .next('img')
82
+
83
+ .attr('src', '/assets/img/l_select_' + i.toString() + '.png')
84
+
85
+ .addClass('input_img');
86
+
87
+ }
88
+
89
+ },
90
+
91
+ function () {
92
+
93
+ alert('再読み込みをして下さい。');
94
+
95
+ }
96
+
97
+ );
98
+
99
+ }
100
+
101
+ create_input();
102
+
103
+ ```

1

誤植

2018/10/26 04:17

投稿

yappi_tengen
yappi_tengen

スコア23

test CHANGED
File without changes
test CHANGED
@@ -30,9 +30,9 @@
30
30
 
31
31
 
32
32
 
33
- 1つめの要素のdata属性には、(json["data_01"]["01"])を持たせ、
33
+ 1つめの要素のdata属性には、(json["data_01"]["data"])を持たせ、
34
34
 
35
- 2つめの要素のdata属性には、(json["data_02"]["02"])を......
35
+ 2つめの要素のdata属性には、(json["data_02"]["data"])を......
36
36
 
37
37
 
38
38