質問編集履歴

3

2016/04/13 23:57

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -244,7 +244,7 @@
244
244
 
245
245
 
246
246
 
247
- //それに対応するaのboxのを取得する
247
+ //それに対応するaのboxのhtmlコンテンツを取得する
248
248
 
249
249
  var result = ('.containerA').find(".boxId[value="+boxVal+"]");
250
250
 

2

コード修正

2016/04/13 23:57

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -174,15 +174,15 @@
174
174
 
175
175
 
176
176
 
177
- .box{
177
+ .box2{
178
178
 
179
179
  width: 150px;
180
180
 
181
181
  height: 30px;
182
182
 
183
- background-color: #EFE;
183
+ background-color: pink;
184
-
184
+
185
- border: solid 1px #CCC;
185
+ border: solid 1px pink;
186
186
 
187
187
  margin: 5px;
188
188
 
@@ -190,22 +190,6 @@
190
190
 
191
191
 
192
192
 
193
- .box2{
194
-
195
- width: 150px;
196
-
197
- height: 30px;
198
-
199
- background-color: pink;
200
-
201
- border: solid 1px pink;
202
-
203
- margin: 5px;
204
-
205
- }
206
-
207
-
208
-
209
193
  </style>
210
194
 
211
195
  </head>

1

修正依頼対応

2016/04/13 22:38

投稿

k499778
k499778

スコア599

test CHANGED
File without changes
test CHANGED
@@ -139,3 +139,143 @@
139
139
  なにかよくやる方法やお手頃なやり方などありましたらアドバイス頂ければなと思います。
140
140
 
141
141
  よろしくお願いします。
142
+
143
+
144
+
145
+
146
+
147
+ ---
148
+
149
+ 追記
150
+
151
+
152
+
153
+ 私の思いつく限りでは以下のような方法になります。
154
+
155
+ もし他にもいい方法があれば教えていただきたいです。
156
+
157
+
158
+
159
+
160
+
161
+ ```HTML
162
+
163
+ <!DOCTYPE html>
164
+
165
+ <html>
166
+
167
+ <head>
168
+
169
+ <meta charset="UTF-8">
170
+
171
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
172
+
173
+ <style>
174
+
175
+
176
+
177
+ .box{
178
+
179
+ width: 150px;
180
+
181
+ height: 30px;
182
+
183
+ background-color: #EFE;
184
+
185
+ border: solid 1px #CCC;
186
+
187
+ margin: 5px;
188
+
189
+ }
190
+
191
+
192
+
193
+ .box2{
194
+
195
+ width: 150px;
196
+
197
+ height: 30px;
198
+
199
+ background-color: pink;
200
+
201
+ border: solid 1px pink;
202
+
203
+ margin: 5px;
204
+
205
+ }
206
+
207
+
208
+
209
+ </style>
210
+
211
+ </head>
212
+
213
+ <body>
214
+
215
+ <div class="containerA" style="display:none">
216
+
217
+ <ul class="backBox">
218
+
219
+ <li class="box">a1<input type="hidden" value="1" class="boxId"></li>
220
+
221
+ <li class="box">a2<input type="hidden" value="2" class="boxId"></li>
222
+
223
+ <li class="box">a3<input type="hidden" value="3" class="boxId"></li>
224
+
225
+ <li class="box">a4<input type="hidden" value="4" class="boxId"></li>
226
+
227
+ <li class="box">a5<input type="hidden" value="5" class="boxId"></li>
228
+
229
+ <li class="box">a6<input type="hidden" value="6" class="boxId"></li>
230
+
231
+ </ul>
232
+
233
+ </div>
234
+
235
+ <div class="containerB">
236
+
237
+ <ul class="backBox">
238
+
239
+ <li class="box2">b2<input type="hidden" value="2" class="boxId"></li>
240
+
241
+ <li class="box2">b3<input type="hidden" value="3" class="boxId"></li>
242
+
243
+ <li class="box2">b5<input type="hidden" value="5" class="boxId"></li>
244
+
245
+ </ul>
246
+
247
+ </div>
248
+
249
+ <script>
250
+
251
+ $('.box2').on('click',function(){
252
+
253
+
254
+
255
+ //対応するaのboxを取得したい
256
+
257
+ //クリックした要素の値を取得する
258
+
259
+ var boxVal = $(this).find('.boxId').val();
260
+
261
+
262
+
263
+ //それに対応するaのboxの値を取得する
264
+
265
+ var result = ('.containerA').find(".boxId[value="+boxVal+"]");
266
+
267
+
268
+
269
+
270
+
271
+ });
272
+
273
+ </script>
274
+
275
+ </body>
276
+
277
+ </html>
278
+
279
+
280
+
281
+ ```