『ページ読み込み時』にCookieが出力できません。。
実現したいこと
「元のHTML」にある.Target
の『クリック時』にCookieを保存しJSONで即出力しています。
この出力について、
『クリック時』は「目的のHTML」になっていて良いのですが、
『ページ読み込み時』が「現状のHTML」になってしまいます。
質問は、「現在のjQuery」をどう改良すれば、『ページ読み込み時』に「目的のHTML」が出力できるかということです。
どうか宜しくお願い致します。
元のHTML
まずこちらのHTMLが表示されています。
(.list
はたくさん並びます。)
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> <span class="name2">@kelly</span> 7 </a> 8 </p> 9 </div> 10 <div data-item="バッグ" data-urltype="http://example.net/product/123" class="Target"> 11 <img src="" alt=""> 12 </div> 13</div> 14<div id="options_output"> 15<!-- Cookieの出力箇所 --> 16</div>
目的のHTML
上の.Target
(img部分)の『クリック時』にCookieを保存し、それに合わせて上の<!-- Cookieの出力箇所 -->
に次のHTMLがJSONで即出力されます。
目的は、これを『クリック時』だけでなく『ページ読み込み時』にも表示することなのですが、、、
html
1<div id="options_output"> 2<ul> 3 <li> 4 <p> 5 <a href="http://example.com/girls/kelly"> 6 <span class="name1">ケリー</span> 7 <span class="name2">@kelly</span> 8 </a> 9 が<span>クリスマスプレゼント</span>に欲しいのは<span data-urltype="http://example.net/product/123">バッグ</span>です。 10 </p> 11 </li> 12</ul> 13</div>
###現在のHTML
しかし、『ページ読み込み時』は上の「目的のHTML」では出力されず、こちらの出力になってしまいます。
html
1<div id="options_output"> 2{"user":["\n 3 <span class="\"name1\"">ケリー</span> 4 <span class="\"name2\"">@kelly</span> 5\n "], 6"title":["ffffffffffffクリスマスプレゼント"], 7"urltype":["http://example.net/product/123"], 8"item":["バッグ"] 9} 10</div>
現在のjQuery
「現在のHTML」を出力するjQueryがこちらです。どうすれば「目的のHTML」を『ページ読み込み時』に出力させることができるでしょうか?
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={ user: [], title: [], urltype: [], item: [] }; 15 } 16 17 params.user.push(user); 18 params.title.push(title); 19 params.urltype.push(urltype); 20 params.item.push(item); 21 22 if( params.user.length>hers_length){ 23 params.user.shift(); 24 params.title.shift(); 25 params.urltype.shift(); 26 params.item.shift(); 27 } 28 29 var ul=$('<ul>'); 30 params.user.forEach(function(){ 31 var output = '<p>'+user+'が<span>'+title+'</span>に欲しいのは<span data-urltype='+urltype+'">'+item+'</span>です。'; 32 $('<li>').append(output).appendTo(ul); 33 }) 34 35 $('#options_output').html(ul); 36 $.cookie('options', JSON.stringify(params)); 37 38 }); 39 40 // クッキー呼び出し 41 var cookie = $.cookie('options'); 42 if(cookie){ 43 $('#options_output').html(cookie); 44 } 45 46});
補足情報(FW/ツールのバージョンなど)
jQueryは2.1.3です。
cookieの保存には、jQueryプラグイン「jquery.cookie.js」を使用しています。
動作サンプルです。
https://jsfiddle.net/fh5eLcwj/
回答1件
あなたの回答
tips
プレビュー