質問編集履歴

1

コードの追加

2019/01/05 06:21

投稿

christmas-tree
christmas-tree

スコア12

title CHANGED
File without changes
body CHANGED
@@ -4,16 +4,112 @@
4
4
 
5
5
  ###実現したいこと
6
6
 
7
- こちらのCodePenのサンプルでは、画像クリックでCookieに内容が保存されるようになっています。
7
+ こちらのCodePenのサンプルでは、画像(``.Target``)クリックでCookieに内容が保存されるようになっています。
8
8
  [https://codepen.io/anon/pen/maXwmx](https://codepen.io/anon/pen/maXwmx)
9
9
 
10
10
  しかし、**2つの画像の片方をクリックすると、もう片方のCookieが上書きされてしまうという**のが今回の問題です。
11
11
 
12
12
  たとえば、1回目に「ケリーのバッグ」をクリックしても、2回目に「エレンのシューズ」をクリックすると、2つとも「エレンのシューズ」で上書きされてしまい、「ケリーのバッグ」が消えてしまいます。
13
13
 
14
+ ###コード
14
- 解決に向けたアバイスを頂けました幸いです。
15
+ CodePenのコーがこちらです。
16
+ 上書きされないようにするために修正すべき点をご教授願えませんでしょうか。
17
+ ```html
18
+ <h1>クリスマスプレゼント</h1>
19
+ <div class="list">
20
+ <div class="userdata">
21
+ <p>
22
+ <a href="http://example.com/girls/kelly">
23
+ <span class="name1">ケリー</span>&nbsp;
24
+ <span class="name2">@kelly</span>
25
+ </a>
26
+ </p>
27
+ </div>
28
+ <div data-item="バッグ" data-urltype="http://example.net/product/123" class="Target">
29
+ <img src="http://urx.red/OUBm" alt="">
30
+ </div>
31
+ </div>
15
32
 
33
+ <div class="list">
34
+ <div class="userdata">
35
+ <p>
36
+ <a href="http://example.com/girls/kelly">
37
+ <span class="name1">エレン</span>&nbsp;
38
+ <span class="name2">@ellen</span>
39
+ </a>
40
+ </p>
41
+ </div>
42
+ <div data-item="シューズ" data-urltype="http://example.net/product/456" class="Target">
43
+ <img src="http://ur0.link/P03G" alt="">
44
+ </div>
45
+ </div>
16
46
 
47
+ <div id="options_output">
48
+ <p>ここにクリックした内容のCookieが出力される。</p>
49
+ </div>
50
+ ```
51
+ ```jquery
52
+ $(function() {
53
+ var hers_length = 5;
54
+
55
+ // クッキー登録
56
+ $('.Target').on('click', function() {
57
+
58
+ var user = $(this).closest('.list').find('.userdata a').html();
59
+ var title = $('h1').text();
60
+ var urltype = $(this).attr('data-urltype');
61
+ var item = $(this).attr('data-item');
62
+
63
+ var params = JSON.parse($.cookie('options') || "{}");
64
+ if (typeof params !== "object" || typeof params.title == "undefined") {
65
+ params = {
66
+ user: [],
67
+ title: [],
68
+ urltype: [],
69
+ item: []
70
+ };
71
+ }
72
+
73
+ params.user.push(user);
74
+ params.title.push(title);
75
+ params.urltype.push(urltype);
76
+ params.item.push(item);
77
+
78
+ if (params.user.length > hers_length) {
79
+ params.user.shift();
80
+ params.title.shift();
81
+ params.urltype.shift();
82
+ params.item.shift();
83
+ }
84
+
85
+ var ul = $('<ul>');
86
+ params.user.forEach(function() {
87
+ var output = '<p>' + user + 'が<span>' + title + '</span>に欲しいのは<span data-urltype=' + urltype + '">' + item + '</span>です。';
88
+ $('<li>').append(output).appendTo(ul);
89
+ })
90
+
91
+ $('#options_output').html(ul);
92
+ $.cookie('options', JSON.stringify(params));
93
+
94
+ });
95
+
96
+ var cookie = $.cookie('options');
97
+ if (cookie) {
98
+ var params = JSON.parse(cookie);
99
+ var ul = $('<ul>');
100
+ params.user.forEach(function(user, i) {
101
+ var output = '<p>' + user + 'が<span>' + params.title[i] + '</span>に欲しいのは<span data-urltype=' + params.urltype[i] +
102
+ '">' + params.item[i] + '</span>です。';
103
+ $('<li>').append(output).appendTo(ul);
104
+ })
105
+ $('#options_output').html(ul);
106
+ }
107
+ });
108
+
109
+ ```
110
+
111
+
112
+
17
113
  ###補足情報
18
114
  jQueryは2.1.3です。
19
115
  cookieの保存には、[jQueryプラグイン「jquery.cookie.js」](https://github.com/carhartl/jquery-cookie)を使用しています。