お世話になっております。
以前の質問が解決し、新たに別問題が生じたために質問させて頂きます。
宜しくお願い致します。
###実現したいこと
こちらのCodePenのサンプルでは、画像(.Target
)クリックでCookieに内容が保存されるようになっています。
https://codepen.io/anon/pen/maXwmx
しかし、2つの画像の片方をクリックすると、もう片方のCookieが上書きされてしまうというのが今回の問題です。
たとえば、1回目に「ケリーのバッグ」をクリックしても、2回目に「エレンのシューズ」をクリックすると、2つとも「エレンのシューズ」で上書きされてしまい、「ケリーのバッグ」が消えてしまいます。
###コード
CodePenのコードがこちらです。
上書きされないようにするために修正すべき点をご教授願えませんでしょうか。
html
1<h1>クリスマスプレゼント</h1> 2<div class="list"> 3 <div class="userdata"> 4 <p> 5 <a href="http://example.com/girls/kelly"> 6 <span class="name1">ケリー</span> 7 <span class="name2">@kelly</span> 8 </a> 9 </p> 10 </div> 11 <div data-item="バッグ" data-urltype="http://example.net/product/123" class="Target"> 12 <img src="http://urx.red/OUBm" alt=""> 13 </div> 14</div> 15 16<div class="list"> 17 <div class="userdata"> 18 <p> 19 <a href="http://example.com/girls/kelly"> 20 <span class="name1">エレン</span> 21 <span class="name2">@ellen</span> 22 </a> 23 </p> 24 </div> 25 <div data-item="シューズ" data-urltype="http://example.net/product/456" class="Target"> 26 <img src="http://ur0.link/P03G" alt=""> 27 </div> 28</div> 29 30<div id="options_output"> 31 <p>ここにクリックした内容のCookieが出力される。</p> 32</div>
jquery
1$(function() { 2 var hers_length = 5; 3 4 // クッキー登録 5 $('.Target').on('click', function() { 6 7 var user = $(this).closest('.list').find('.userdata a').html(); 8 var title = $('h1').text(); 9 var urltype = $(this).attr('data-urltype'); 10 var item = $(this).attr('data-item'); 11 12 var params = JSON.parse($.cookie('options') || "{}"); 13 if (typeof params !== "object" || typeof params.title == "undefined") { 14 params = { 15 user: [], 16 title: [], 17 urltype: [], 18 item: [] 19 }; 20 } 21 22 params.user.push(user); 23 params.title.push(title); 24 params.urltype.push(urltype); 25 params.item.push(item); 26 27 if (params.user.length > hers_length) { 28 params.user.shift(); 29 params.title.shift(); 30 params.urltype.shift(); 31 params.item.shift(); 32 } 33 34 var ul = $('<ul>'); 35 params.user.forEach(function() { 36 var output = '<p>' + user + 'が<span>' + title + '</span>に欲しいのは<span data-urltype=' + urltype + '">' + item + '</span>です。'; 37 $('<li>').append(output).appendTo(ul); 38 }) 39 40 $('#options_output').html(ul); 41 $.cookie('options', JSON.stringify(params)); 42 43 }); 44 45 var cookie = $.cookie('options'); 46 if (cookie) { 47 var params = JSON.parse(cookie); 48 var ul = $('<ul>'); 49 params.user.forEach(function(user, i) { 50 var output = '<p>' + user + 'が<span>' + params.title[i] + '</span>に欲しいのは<span data-urltype=' + params.urltype[i] + 51 '">' + params.item[i] + '</span>です。'; 52 $('<li>').append(output).appendTo(ul); 53 }) 54 $('#options_output').html(ul); 55 } 56}); 57
###補足情報
jQueryは2.1.3です。
cookieの保存には、jQueryプラグイン「jquery.cookie.js」を使用しています。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/01/05 06:12
2019/01/05 06:32
2019/01/06 08:02 編集