質問編集履歴
7
文章を戻した
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,37 +1,249 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
現
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
『ページ読み込み時』にCookieが出力できません。。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
### 実現したいこと
|
|
6
|
+
|
|
7
|
+
「元のHTML」にある``.Target``の『クリック時』にCookieを保存しJSONで即出力しています。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
この出力について、
|
|
12
|
+
|
|
13
|
+
『クリック時』は「目的のHTML」になっていて良いのですが、
|
|
14
|
+
|
|
15
|
+
『ページ読み込み時』が「現状のHTML」になってしまいます。
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
質問は、「現在のjQuery」をどう改良すれば、『ページ読み込み時』に「目的のHTML」が出力できるかということです。
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
どうか宜しくお願い致します。
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
### 元のHTML
|
|
28
|
+
|
|
29
|
+
まずこちらのHTMLが表示されています。
|
|
30
|
+
|
|
31
|
+
（``.list``はたくさん並びます。）
|
|
32
|
+
|
|
33
|
+
```HTML
|
|
34
|
+
|
|
35
|
+
<h1>クリスマスプレゼント</h1>
|
|
36
|
+
|
|
37
|
+
<div class="list">
|
|
38
|
+
|
|
39
|
+
<div class="userdata">
|
|
40
|
+
|
|
41
|
+
<p>
|
|
42
|
+
|
|
43
|
+
<a href="http://example.com/girls/kelly">
|
|
44
|
+
|
|
45
|
+
<span class="name1">ケリー</span> <span class="name2">@kelly</span>
|
|
46
|
+
|
|
47
|
+
</a>
|
|
48
|
+
|
|
49
|
+
</p>
|
|
50
|
+
|
|
51
|
+
</div>
|
|
52
|
+
|
|
53
|
+
<div data-item="バッグ" data-urltype="http://example.net/product/123" class="Target">
|
|
54
|
+
|
|
55
|
+
<img src="" alt="">
|
|
56
|
+
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div id="options_output">
|
|
62
|
+
|
|
63
|
+
<!-- Cookieの出力箇所 -->
|
|
64
|
+
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
### 目的のHTML
|
|
70
|
+
|
|
71
|
+
上の``.Target``（img部分）の『クリック時』にCookieを保存し、それに合わせて上の``<!-- Cookieの出力箇所 -->``に次のHTMLがJSONで即出力されます。
|
|
72
|
+
|
|
73
|
+
目的は、これを『クリック時』だけでなく『ページ読み込み時』にも表示することなのですが、、、
|
|
74
|
+
|
|
75
|
+
```html
|
|
76
|
+
|
|
77
|
+
<div id="options_output">
|
|
78
|
+
|
|
79
|
+
<ul>
|
|
80
|
+
|
|
81
|
+
<li>
|
|
82
|
+
|
|
83
|
+
<p>
|
|
84
|
+
|
|
85
|
+
<a href="http://example.com/girls/kelly">
|
|
86
|
+
|
|
87
|
+
<span class="name1">ケリー</span>
|
|
88
|
+
|
|
89
|
+
<span class="name2">@kelly</span>
|
|
90
|
+
|
|
91
|
+
</a>
|
|
92
|
+
|
|
93
|
+
が<span>クリスマスプレゼント</span>に欲しいのは<span data-urltype="http://example.net/product/123">バッグ</span>です。
|
|
94
|
+
|
|
95
|
+
</p>
|
|
96
|
+
|
|
97
|
+
</li>
|
|
98
|
+
|
|
99
|
+
</ul>
|
|
100
|
+
|
|
101
|
+
</div>
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
|
|
107
|
+
###現在のHTML
|
|
108
|
+
|
|
109
|
+
しかし、『ページ読み込み時』は上の「目的のHTML」では出力されず、こちらの出力になってしまいます。
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
```html
|
|
114
|
+
|
|
115
|
+
<div id="options_output">
|
|
116
|
+
|
|
117
|
+
{"user":["\n
|
|
118
|
+
|
|
119
|
+
<span class="\"name1\"">ケリー</span>
|
|
120
|
+
|
|
121
|
+
<span class="\"name2\"">@kelly</span>
|
|
122
|
+
|
|
123
|
+
\n "],
|
|
124
|
+
|
|
125
|
+
"title":["ffffffffffffクリスマスプレゼント"],
|
|
126
|
+
|
|
127
|
+
"urltype":["http://example.net/product/123"],
|
|
128
|
+
|
|
129
|
+
"item":["バッグ"]
|
|
130
|
+
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### 現在のjQuery
|
|
138
|
+
|
|
139
|
+
「現在のHTML」を出力するjQueryがこちらです。どうすれば「目的のHTML」を『ページ読み込み時』に出力させることができるでしょうか？
|
|
140
|
+
|
|
141
|
+
```jquery
|
|
142
|
+
|
|
143
|
+
$(function(){
|
|
144
|
+
|
|
145
|
+
var hers_length=5;
|
|
146
|
+
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
// クッキー登録
|
|
150
|
+
|
|
151
|
+
$('.Target').on('click',function(){
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
var user = $(this).closest('.list').find('.userdata a').html();
|
|
156
|
+
|
|
157
|
+
var title = $('h1').text();
|
|
158
|
+
|
|
159
|
+
var urltype = $(this).attr('data-urltype');
|
|
160
|
+
|
|
161
|
+
var item = $(this).attr('data-item');
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
var params = JSON.parse($.cookie('options')||"{}");
|
|
166
|
+
|
|
167
|
+
if(typeof params!=="object" || typeof params.title=="undefined"){
|
|
168
|
+
|
|
169
|
+
params={ user: [], title: [], urltype: [], item: [] };
|
|
170
|
+
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
params.user.push(user);
|
|
176
|
+
|
|
177
|
+
params.title.push(title);
|
|
178
|
+
|
|
179
|
+
params.urltype.push(urltype);
|
|
180
|
+
|
|
181
|
+
params.item.push(item);
|
|
182
|
+
|
|
183
|
+
|
|
184
|
+
|
|
185
|
+
if( params.user.length>hers_length){
|
|
186
|
+
|
|
187
|
+
params.user.shift();
|
|
188
|
+
|
|
189
|
+
params.title.shift();
|
|
190
|
+
|
|
191
|
+
params.urltype.shift();
|
|
192
|
+
|
|
193
|
+
params.item.shift();
|
|
194
|
+
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
|
|
198
|
+
|
|
199
|
+
var ul=$('<ul>');
|
|
200
|
+
|
|
201
|
+
params.user.forEach(function(){
|
|
202
|
+
|
|
203
|
+
var output = '<p>'+user+'が<span>'+title+'</span>に欲しいのは<span data-urltype='+urltype+'">'+item+'</span>です。';
|
|
204
|
+
|
|
205
|
+
$('<li>').append(output).appendTo(ul);
|
|
206
|
+
|
|
207
|
+
})
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
211
|
+
$('#options_output').html(ul);
|
|
212
|
+
|
|
213
|
+
$.cookie('options', JSON.stringify(params));
|
|
214
|
+
|
|
215
|
+
|
|
216
|
+
|
|
217
|
+
});
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
// クッキー呼び出し
|
|
222
|
+
|
|
223
|
+
var cookie = $.cookie('options');
|
|
224
|
+
|
|
225
|
+
if(cookie){
|
|
226
|
+
|
|
227
|
+
$('#options_output').html(cookie);
|
|
228
|
+
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
});
|
|
234
|
+
|
|
235
|
+
```
|
|
236
|
+
|
|
237
|
+
### 補足情報（FW/ツールのバージョンなど）
|
|
238
|
+
|
|
239
|
+
jQueryは2.1.3です。
|
|
240
|
+
|
|
241
|
+
cookieの保存には、[jQueryプラグイン「jquery.cookie.js」](https://github.com/carhartl/jquery-cookie)を使用しています。
|
|
242
|
+
|
|
243
|
+
|
|
244
|
+
|
|
245
|
+
|
|
246
|
+
|
|
247
|
+
動作サンプルです。
|
|
12
248
|
|
|
13
249
|
[https://jsfiddle.net/fh5eLcwj/](https://jsfiddle.net/fh5eLcwj/)
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
しかし現状では「クリック時」にしかできず、「ページ読み込み時」にはJSON形式のままになってしまうんです。
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
HTML形式にするための JSON.parse() とやらがあるそうですが、その使い方が調べてもよく分からず、、、
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
どなたかjQeuryの達人の方に、正しい書き方をご指南いただければと思い質問させて頂きました。
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
どうすれば「ページ読み込み時」も「クリック時」と同様の出力ができるでしょうか？
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
見にくいコードになってしまっているやもしれませんが、どなたか、、!!!
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
どうか宜しくお願い致します。
|
6
質問文の簡略化
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,235 +1,37 @@
|
|
|
1
|
-
|
|
1
|
+
jQueryを使ったCookieなんですが、達人の方はいらっしゃいますか？
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
### 実現したいこと
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
現状では下記のjsfiddleのコードです。
|
|
8
6
|
|
|
9
7
|
|
|
10
8
|
|
|
11
|
-
|
|
9
|
+
これはバッグの画像クリック時に、<div id="options_output"></div>に内容を出力させています。
|
|
12
10
|
|
|
13
11
|
|
|
14
12
|
|
|
15
|
-
|
|
13
|
+
[https://jsfiddle.net/fh5eLcwj/](https://jsfiddle.net/fh5eLcwj/)
|
|
16
14
|
|
|
17
15
|
|
|
18
16
|
|
|
19
|
-
### 元のHTML
|
|
20
|
-
|
|
21
|
-
まずこちらのHTMLが表示されています。
|
|
22
|
-
|
|
23
|
-
（``.list``はたくさん並びます。）
|
|
24
|
-
|
|
25
|
-
```HTML
|
|
26
|
-
|
|
27
|
-
<h1>クリスマスプレゼント</h1>
|
|
28
|
-
|
|
29
|
-
<div class="list">
|
|
30
|
-
|
|
31
|
-
<div class="userdata">
|
|
32
|
-
|
|
33
|
-
<p>
|
|
34
|
-
|
|
35
|
-
<a href="http://example.com/girls/kelly">
|
|
36
|
-
|
|
37
|
-
<span class="name1">ケリー</span> <span class="name2">@kelly</span>
|
|
38
|
-
|
|
39
|
-
</a>
|
|
40
|
-
|
|
41
|
-
</p>
|
|
42
|
-
|
|
43
|
-
</div>
|
|
44
|
-
|
|
45
|
-
<div data-item="バッグ" data-urltype="http://example.net/product/123" class="Target">
|
|
46
|
-
|
|
47
|
-
<img src="" alt="">
|
|
48
|
-
|
|
49
|
-
</div>
|
|
50
|
-
|
|
51
|
-
</div>
|
|
52
|
-
|
|
53
|
-
<div id="options_output">
|
|
54
|
-
|
|
55
|
-
<!-- Cookieの出力箇所 -->
|
|
56
|
-
|
|
57
|
-
</div>
|
|
58
|
-
|
|
59
|
-
```
|
|
60
|
-
|
|
61
|
-
### 目的のHTML
|
|
62
|
-
|
|
63
|
-
上の``.Target``（img部分）のクリック時にCookieを保存し、それに合わせて上の``<!-- Cookieの出力箇所 -->``に次のHTMLが出力されます。
|
|
64
|
-
|
|
65
|
-
|
|
17
|
+
しかし現状では「クリック時」にしかできず、「ページ読み込み時」にはJSON形式のままになってしまうんです。
|
|
66
|
-
|
|
67
|
-
```html
|
|
68
|
-
|
|
69
|
-
<div id="options_output">
|
|
70
|
-
|
|
71
|
-
<ul>
|
|
72
|
-
|
|
73
|
-
<li>
|
|
74
|
-
|
|
75
|
-
<p>
|
|
76
|
-
|
|
77
|
-
<a href="http://example.com/girls/kelly">
|
|
78
|
-
|
|
79
|
-
<span class="name1">ケリー</span>
|
|
80
|
-
|
|
81
|
-
<span class="name2">@kelly</span>
|
|
82
|
-
|
|
83
|
-
</a>
|
|
84
|
-
|
|
85
|
-
が<span>クリスマスプレゼント</span>に欲しいのは<span data-urltype="http://example.net/product/123">バッグ</span>です。
|
|
86
|
-
|
|
87
|
-
</p>
|
|
88
|
-
|
|
89
|
-
</li>
|
|
90
|
-
|
|
91
|
-
</ul>
|
|
92
|
-
|
|
93
|
-
</div>
|
|
94
|
-
|
|
95
|
-
```
|
|
96
18
|
|
|
97
19
|
|
|
98
20
|
|
|
99
|
-
###現在のHTML
|
|
100
|
-
|
|
101
|
-
|
|
21
|
+
HTML形式にするための JSON.parse() とやらがあるそうですが、その使い方が調べてもよく分からず、、、
|
|
102
22
|
|
|
103
23
|
|
|
104
24
|
|
|
105
|
-
```html
|
|
106
|
-
|
|
107
|
-
<div id="options_output">
|
|
108
|
-
|
|
109
|
-
{"user":["\n
|
|
110
|
-
|
|
111
|
-
<span class="\"name1\"">ケリー</span>
|
|
112
|
-
|
|
113
|
-
<span class="\"name2\"">@kelly</span>
|
|
114
|
-
|
|
115
|
-
\n "],
|
|
116
|
-
|
|
117
|
-
"title":["ffffffffffffクリスマスプレゼント"],
|
|
118
|
-
|
|
119
|
-
"urltype":["http://example.net/product/123"],
|
|
120
|
-
|
|
121
|
-
"item":["バッグ"]
|
|
122
|
-
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
</div>
|
|
126
|
-
|
|
127
|
-
```
|
|
128
|
-
|
|
129
|
-
### 現在のjQuery
|
|
130
|
-
|
|
131
|
-
「現在のHTML」を出力するjQueryがこちらです。どうすれば「目的のHTML」を『ページ読み込み時』に出力させることができるでしょうか？
|
|
132
|
-
|
|
133
|
-
```jquery
|
|
134
|
-
|
|
135
|
-
$(function(){
|
|
136
|
-
|
|
137
|
-
var hers_length=5;
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
// クッキー登録
|
|
142
|
-
|
|
143
|
-
$('.Target').on('click',function(){
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
var user = $(this).closest('.list').find('.userdata a').html();
|
|
148
|
-
|
|
149
|
-
var title = $('h1').text();
|
|
150
|
-
|
|
151
|
-
var urltype = $(this).attr('data-urltype');
|
|
152
|
-
|
|
153
|
-
|
|
25
|
+
どなたかjQeuryの達人の方に、正しい書き方をご指南いただければと思い質問させて頂きました。
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
var params = JSON.parse($.cookie('options')||"{}");
|
|
158
|
-
|
|
159
|
-
if(typeof params!=="object" || typeof params.title=="undefined"){
|
|
160
|
-
|
|
161
|
-
params={ user: [], title: [], urltype: [], item: [] };
|
|
162
|
-
|
|
163
|
-
}
|
|
164
26
|
|
|
165
27
|
|
|
166
28
|
|
|
167
|
-
params.user.push(user);
|
|
168
|
-
|
|
169
|
-
params.title.push(title);
|
|
170
|
-
|
|
171
|
-
params.urltype.push(urltype);
|
|
172
|
-
|
|
173
|
-
params.item.push(item);
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
29
|
+
どうすれば「ページ読み込み時」も「クリック時」と同様の出力ができるでしょうか？
|
|
178
|
-
|
|
179
|
-
params.user.shift();
|
|
180
|
-
|
|
181
|
-
params.title.shift();
|
|
182
|
-
|
|
183
|
-
params.urltype.shift();
|
|
184
|
-
|
|
185
|
-
params.item.shift();
|
|
186
|
-
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
var ul=$('<ul>');
|
|
192
|
-
|
|
193
|
-
params.user.forEach(function(){
|
|
194
|
-
|
|
195
|
-
var output = '<p>'+user+'が<span>'+title+'</span>に欲しいのは<span data-urltype='+urltype+'">'+item+'</span>です。';
|
|
196
|
-
|
|
197
|
-
$('<li>').append(output).appendTo(ul);
|
|
198
|
-
|
|
199
|
-
})
|
|
200
30
|
|
|
201
31
|
|
|
202
32
|
|
|
203
|
-
|
|
33
|
+
見にくいコードになってしまっているやもしれませんが、どなたか、、!!!
|
|
204
|
-
|
|
205
|
-
$.cookie('options', JSON.stringify(params));
|
|
206
34
|
|
|
207
35
|
|
|
208
36
|
|
|
209
|
-
});
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
// クッキー呼び出し
|
|
214
|
-
|
|
215
|
-
var cookie = $.cookie('options');
|
|
216
|
-
|
|
217
|
-
if(cookie){
|
|
218
|
-
|
|
219
|
-
$('#options_output').html(cookie);
|
|
220
|
-
|
|
221
|
-
}
|
|
222
|
-
|
|
223
|
-
});
|
|
224
|
-
|
|
225
|
-
```
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
### 補足情報（FW/ツールのバージョンなど）
|
|
232
|
-
|
|
233
|
-
|
|
37
|
+
どうか宜しくお願い致します。
|
|
234
|
-
|
|
235
|
-
cookieの保存には、[jQueryプラグイン「jquery.cookie.js」](https://github.com/carhartl/jquery-cookie)を使用しています。
|
5
文章変更
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Cookieを配列で保存し出力する際に、ページ読み込み時だけ表示がおかしい
|
test
CHANGED
|
@@ -1,24 +1,18 @@
|
|
|
1
|
-
Cookie
|
|
1
|
+
『ページ読み込み時』にCookieが出力できません。。
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
5
|
### 実現したいこと
|
|
6
6
|
|
|
7
|
-
「元のHTML」
|
|
7
|
+
「元のHTML」にある``.Target``の『クリック時』にCookieを保存しjsonで即出力しています。
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
-
|
|
11
|
+
しかし保存されたCookieが、『ページ読み込み時』に「現在のHTML」で出力されてしまうので、これを「目的のHTML」のようにしたいです。
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
13
|
+
|
|
14
|
+
|
|
19
|
-
そのために「
|
|
15
|
+
そのために「現在のjQuery」をどうすべきか、正しい書き方を教えて頂けませんでしょうか。
|
|
20
|
-
|
|
21
|
-
|
|
22
16
|
|
|
23
17
|
|
|
24
18
|
|
|
@@ -26,7 +20,7 @@
|
|
|
26
20
|
|
|
27
21
|
まずこちらのHTMLが表示されています。
|
|
28
22
|
|
|
29
|
-
（
|
|
23
|
+
（``.list``はたくさん並びます。）
|
|
30
24
|
|
|
31
25
|
```HTML
|
|
32
26
|
|
|
@@ -66,7 +60,9 @@
|
|
|
66
60
|
|
|
67
61
|
### 目的のHTML
|
|
68
62
|
|
|
69
|
-
上の
|
|
63
|
+
上の``.Target``（img部分）のクリック時にCookieを保存し、それに合わせて上の``<!-- Cookieの出力箇所 -->``に次のHTMLが出力されます。
|
|
64
|
+
|
|
65
|
+
目的は、これを『クリック時』だけでなく『ページ読み込み時』にも表示することなのですが、、、
|
|
70
66
|
|
|
71
67
|
```html
|
|
72
68
|
|
|
@@ -80,7 +76,9 @@
|
|
|
80
76
|
|
|
81
77
|
<a href="http://example.com/girls/kelly">
|
|
82
78
|
|
|
83
|
-
<span class="name1">ケリー</span>
|
|
79
|
+
<span class="name1">ケリー</span>
|
|
80
|
+
|
|
81
|
+
<span class="name2">@kelly</span>
|
|
84
82
|
|
|
85
83
|
</a>
|
|
86
84
|
|
|
@@ -100,37 +98,27 @@
|
|
|
100
98
|
|
|
101
99
|
###現在のHTML
|
|
102
100
|
|
|
103
|
-
しかし、ページ読み込み時は上の「目的のHTML」では出力されず、こちらの出力になってしまいます。
|
|
101
|
+
しかし、『ページ読み込み時』は上の「目的のHTML」では出力されず、こちらの出力になってしまいます。
|
|
104
|
-
|
|
105
|
-
|
|
102
|
+
|
|
106
|
-
|
|
107
|
-
|
|
103
|
+
|
|
108
104
|
|
|
109
105
|
```html
|
|
110
106
|
|
|
111
107
|
<div id="options_output">
|
|
112
108
|
|
|
113
|
-
{
|
|
114
|
-
|
|
115
|
-
"user":["\n
|
|
109
|
+
{"user":["\n
|
|
116
|
-
|
|
110
|
+
|
|
117
|
-
<span class="\"name1\"">ケリー</span>
|
|
111
|
+
<span class="\"name1\"">ケリー</span>
|
|
118
|
-
|
|
112
|
+
|
|
119
|
-
<span class="\"name2\"">@kelly</span>
|
|
113
|
+
<span class="\"name2\"">@kelly</span>
|
|
120
|
-
|
|
121
|
-
\n ","\n
|
|
122
|
-
|
|
123
|
-
<span class="\"name1\"">ケリー</span>
|
|
124
|
-
|
|
125
|
-
<span class="\"name2\"">@kelly</span>
|
|
126
114
|
|
|
127
115
|
\n "],
|
|
128
116
|
|
|
129
|
-
"title":["クリスマスプレゼント"
|
|
117
|
+
"title":["ffffffffffffクリスマスプレゼント"],
|
|
130
|
-
|
|
118
|
+
|
|
131
|
-
"urltype":"http://example.net/product/123"
|
|
119
|
+
"urltype":["http://example.net/product/123"],
|
|
132
|
-
|
|
120
|
+
|
|
133
|
-
"item":["バッグ"
|
|
121
|
+
"item":["バッグ"]
|
|
134
122
|
|
|
135
123
|
}
|
|
136
124
|
|
|
@@ -138,9 +126,9 @@
|
|
|
138
126
|
|
|
139
127
|
```
|
|
140
128
|
|
|
141
|
-
###
|
|
129
|
+
### 現在のjQuery
|
|
142
|
-
|
|
130
|
+
|
|
143
|
-
|
|
131
|
+
「現在のHTML」を出力するjQueryがこちらです。どうすれば「目的のHTML」を『ページ読み込み時』に出力させることができるでしょうか？
|
|
144
132
|
|
|
145
133
|
```jquery
|
|
146
134
|
|
4
文章修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,22 @@
|
|
|
1
|
+
Cookieの保存と出力が上手くいきません。。
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
### 実現したいこと
|
|
2
6
|
|
|
3
|
-
「元のHTML」の「.Target」
|
|
7
|
+
「元のHTML」の「.Target」クリックで、Cookieの保存と出力がしたいです。
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
7
|
-
クリック
|
|
11
|
+
クリック時は「目的のHTML」が出力できるのですが、サイト読み込み時に「現在のHTML」の状態で出力されてしまいます。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
8
|
-
|
|
15
|
+
サイト読み込み時にも「目的のHTML」を出力したいです。
|
|
9
|
-
|
|
10
|
-
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
11
|
-
「試したこと」にあるコード
|
|
19
|
+
そのために「試したこと」にあるコードについて、正しい書き方を教えて頂けませんでしょうか？
|
|
12
20
|
|
|
13
21
|
|
|
14
22
|
|
|
@@ -50,7 +58,7 @@
|
|
|
50
58
|
|
|
51
59
|
<div id="options_output">
|
|
52
60
|
|
|
53
|
-
<!--
|
|
61
|
+
<!-- Cookieの出力箇所 -->
|
|
54
62
|
|
|
55
63
|
</div>
|
|
56
64
|
|
|
@@ -58,9 +66,7 @@
|
|
|
58
66
|
|
|
59
67
|
### 目的のHTML
|
|
60
68
|
|
|
61
|
-
上
|
|
69
|
+
上の「.Target」クリックでCookieを更新し、それに合わせて上の<!-- Cookieの出力箇所 -->に出力されるHTMLが次のものです。
|
|
62
|
-
|
|
63
|
-
（<li>をどんどん増やしていきたいです。）
|
|
64
70
|
|
|
65
71
|
```html
|
|
66
72
|
|
|
@@ -94,17 +100,47 @@
|
|
|
94
100
|
|
|
95
101
|
###現在のHTML
|
|
96
102
|
|
|
103
|
+
しかし、ページ読み込み時は上の「目的のHTML」では出力されず、こちらの出力になってしまいます。
|
|
104
|
+
|
|
97
|
-
|
|
105
|
+
こちらは「元のHTML」の「.Target」を2回クリックし、その後のページを読み込んだ状態の出力です。
|
|
106
|
+
|
|
107
|
+
どうしたら「目的のHTML」が出力できるでしょうか？
|
|
98
108
|
|
|
99
109
|
```html
|
|
100
110
|
|
|
101
|
-
<div id="options_output">
|
|
111
|
+
<div id="options_output">
|
|
112
|
+
|
|
113
|
+
{
|
|
114
|
+
|
|
115
|
+
"user":["\n
|
|
116
|
+
|
|
117
|
+
<span class="\"name1\"">ケリー</span>
|
|
118
|
+
|
|
119
|
+
<span class="\"name2\"">@kelly</span>
|
|
120
|
+
|
|
121
|
+
\n ","\n
|
|
122
|
+
|
|
123
|
+
<span class="\"name1\"">ケリー</span>
|
|
124
|
+
|
|
125
|
+
<span class="\"name2\"">@kelly</span>
|
|
126
|
+
|
|
127
|
+
\n "],
|
|
128
|
+
|
|
129
|
+
"title":["クリスマスプレゼント","クリスマスプレゼント"],
|
|
130
|
+
|
|
131
|
+
"urltype":"http://example.net/product/123","http://example.net/product/123"],
|
|
132
|
+
|
|
133
|
+
"item":["バッグ","バッグ"]
|
|
134
|
+
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
</div>
|
|
102
138
|
|
|
103
139
|
```
|
|
104
140
|
|
|
105
141
|
### 試したこと
|
|
106
142
|
|
|
107
|
-
|
|
143
|
+
Cookieの更新とHTMLの出力を考えて書いてみたのが次のものです。
|
|
108
144
|
|
|
109
145
|
```jquery
|
|
110
146
|
|
3
現在のHTMLを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
|
-
「元のHTML」の「.Target」のクリックで、「目的のHTML」のような出力をしたい
|
|
3
|
+
「元のHTML」の「.Target」のクリックで、「目的のHTML」のような出力をしたいです。
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
クリック直後にはちゃんとできるのですが、サイト読み込み時に「現在のHTML」の状態で出力されてしまいます。
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
「試したこと」にあるコードの正しい書き方を教えて頂けませんでしょうか？
|
|
4
12
|
|
|
5
13
|
|
|
6
14
|
|
|
@@ -78,14 +86,22 @@
|
|
|
78
86
|
|
|
79
87
|
</ul>
|
|
80
88
|
|
|
81
|
-
<!-- cookieの出力箇所 -->
|
|
82
|
-
|
|
83
89
|
</div>
|
|
84
90
|
|
|
85
91
|
```
|
|
86
92
|
|
|
87
93
|
|
|
88
94
|
|
|
95
|
+
###現在のHTML
|
|
96
|
+
|
|
97
|
+
たとえば「元のHTML」の「.Target」を2回クリックし、その後ページを読み込んでみると、このような出力になってしまいます…
|
|
98
|
+
|
|
99
|
+
```html
|
|
100
|
+
|
|
101
|
+
<div id="options_output">{"user":["\n <span class="\"name1\"">ケリー</span> <span class="\"name2\"">@kelly</span>\n ","\n <span class="\"name1\"">ケリー</span> <span class="\"name2\"">@kelly</span>\n "],"title":["クリスマスプレゼント","クリスマスプレゼント"],"urltype":["http://example.net/product/123","http://example.net/product/123"],"item":["バッグ","バッグ"]}</div>
|
|
102
|
+
|
|
103
|
+
```
|
|
104
|
+
|
|
89
105
|
### 試したこと
|
|
90
106
|
|
|
91
107
|
cookieの更新とHTMLの出力を考えて書いてみたのが次のものです。
|
|
@@ -152,7 +168,7 @@
|
|
|
152
168
|
|
|
153
169
|
params.user.forEach(function(){
|
|
154
170
|
|
|
155
|
-
var output = '<p>'+user+'が<span>'+title'</span>に欲しいのは<span data-urltype='+urltype+'">'+item+'</span>です。'
|
|
171
|
+
var output = '<p>'+user+'が<span>'+title+'</span>に欲しいのは<span data-urltype='+urltype+'">'+item+'</span>です。';
|
|
156
172
|
|
|
157
173
|
$('<li>').append(output).appendTo(ul);
|
|
158
174
|
|
2
わかりやすく
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
### 実現したいこと
|
|
2
2
|
|
|
3
|
-
「.Target」のクリックで、下記のようにcookieと<li>を更新したいです。
|
|
4
|
-
|
|
5
|
-
「試したこと」にあるコード
|
|
3
|
+
「元のHTML」の「.Target」のクリックで、「目的のHTML」のような出力をしたいのですが、「試したこと」にあるコードの正しい書き方を教えて頂けませんでしょうか？
|
|
6
4
|
|
|
7
5
|
|
|
8
6
|
|
|
9
7
|
|
|
10
8
|
|
|
11
|
-
###
|
|
9
|
+
### 元のHTML
|
|
12
10
|
|
|
13
11
|
まずこちらのHTMLが表示されています。
|
|
14
12
|
|
|
@@ -49,6 +47,8 @@
|
|
|
49
47
|
</div>
|
|
50
48
|
|
|
51
49
|
```
|
|
50
|
+
|
|
51
|
+
### 目的のHTML
|
|
52
52
|
|
|
53
53
|
上にあります「.Target」のクリックで、cookieを更新し、それに合わせて<!-- cookieの出力箇所 -->に出力したいHTMLが次のものです。
|
|
54
54
|
|
1
コードを一部修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -42,13 +42,21 @@
|
|
|
42
42
|
|
|
43
43
|
</div>
|
|
44
44
|
|
|
45
|
+
<div id="options_output">
|
|
46
|
+
|
|
47
|
+
<!-- cookieの出力箇所 -->
|
|
48
|
+
|
|
49
|
+
</div>
|
|
50
|
+
|
|
45
51
|
```
|
|
46
52
|
|
|
47
|
-
上にあります「.Target」のクリックで、cookieを更新し、それに合わせて出力したいHTMLが次のものです。
|
|
53
|
+
上にあります「.Target」のクリックで、cookieを更新し、それに合わせて<!-- cookieの出力箇所 -->に出力したいHTMLが次のものです。
|
|
48
54
|
|
|
49
55
|
（<li>をどんどん増やしていきたいです。）
|
|
50
56
|
|
|
51
57
|
```html
|
|
58
|
+
|
|
59
|
+
<div id="options_output">
|
|
52
60
|
|
|
53
61
|
<ul>
|
|
54
62
|
|
|
@@ -58,7 +66,7 @@
|
|
|
58
66
|
|
|
59
67
|
<a href="http://example.com/girls/kelly">
|
|
60
68
|
|
|
61
|
-
<span class="name1">ケリー
|
|
69
|
+
<span class="name1">ケリー</span> <span class="name2">@kelly</span>
|
|
62
70
|
|
|
63
71
|
</a>
|
|
64
72
|
|
|
@@ -69,6 +77,10 @@
|
|
|
69
77
|
</li>
|
|
70
78
|
|
|
71
79
|
</ul>
|
|
80
|
+
|
|
81
|
+
<!-- cookieの出力箇所 -->
|
|
82
|
+
|
|
83
|
+
</div>
|
|
72
84
|
|
|
73
85
|
```
|
|
74
86
|
|