Q&A
最終的にしたいこと：
1,一覧をページに
まだ何も保存されていなかった場合にはメッセージのみを表示したいです(例：何もクリックされていません)。尚且つ、逆に画像が渡されたらメッッセージは非表示で画像のみが一覧で表示されるようにしたいです。
2,最新順が一番上に表示されるようにしたいです、補足：例えば：画像が100個あるとして、一番最後に来た画像が一番上に表示されますように;
現状はまだ保存されてない場合は真っ白な画面になってます
下記は登録画面でボタンが押されたら表示する処理のlist.htmlです
下記は基本になる登録image.htmlです
<!doctype html> <html lang="ja"> <script> $(function () { $(document).ready( function(){ });$('img[src="/images/btn_favorite.png"]').click(function () {
var index = $('img[src="/images/btn_favorite.png"]').index(this);
var h2 = $('div.box_text:eq(' + index + ')').children('h2');
var img = $('div.box_main:eq(' + index + ')').find('img');
var src_para = $(this).closest('a').attr('href');
$.cookie.json = true;
var data = $(h2).text() + '_' + './' + img.attr('src');
if ($.cookie('favorite') == null) {
var p = [];
p.push(data);
$.cookie('favorite', JSON.stringify(p), {'expires':7, 'path': '/'});
}
else {
var ss = JSON.parse($.cookie('favorite'));
console.log(ss);
if (ss.indexOf(data) == -1) {
ss.push(data);
}
$.cookie('favorite', JSON.stringify(fa), {'expires':7, 'path': '/'});
}
});
});
</script>
回答1件
0
ベストアンサー
以下のように修正してみました。
list.html
<!DOCTYPE html> <html lang="ja"> <head> <script src="./jquery-1.11.3.min.js"></script> <script src="./jquery.cookie.js"></script> <script type="text/javascript" charset="utf-8"> $(function() { $(document).ready( function(){ var ss = $.cookie('favorite'); if (ss == null ) { $('#list').text('何もクリックされていません'); } else { ss = $.cookie('favorite'); ss = JSON.parse(ss); ss = JSON.parse(ss); for (var i = ss.length - 1; i >= 0; i--) { ss[i] = ss[i].substring(ss[i].lastIndexOf('_0') + 2, ss[i].length); var d = ss[i].split('_'); $('#list').append($("<img>").attr("src", d[1])); } } }); }); </script> </head> <body class="index" > <div id="list"> </div> </body> </html>
image.html
<!doctype html> <html lang="ja"> <head> <script src="./jquery-1.11.3.min.js"></script> <script src="./jquery.cookie.js"></script> <script> $(function () { $('img[src="./images/btn_favorite.png"]').click(function () { var index = $('img[src="./images/btn_favorite.png"]').index(this); var h2 = $('div.box_text:eq(' + index + ')').children('h2'); var img = $('div.box_main:eq(' + index + ')').find('img'); $.cookie.json = true; var data = $(h2).text() + '_' + img.attr('src'); if ($.cookie('favorite') == null) { var p = []; p.push(data); $.cookie('favorite', JSON.stringify(p), {'expires':7, 'path': '/'}); } else { var ss = JSON.parse($.cookie('favorite')); console.log(ss); if (ss.indexOf(data) == -1) { ss.push(data); } else { var tsumenaoshi = []; for(var i = 0; i < ss.length; i++) { if(ss[i] != data) { tsumenaoshi.push(ss[i]); } } tsumenaoshi.push(data); ss = tsumenaoshi; } $.cookie('favorite', JSON.stringify(ss), {'expires':7, 'path': '/'}); } return false; }); }); </script> </head> <body> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="./images/A.png" ></a></div> <div class="box_text"> <h2>表品A</h2> </div> </div> <table width="100%"> <tbody> <tr> <td width="50%"> <a href="" class="etc_link"><img src="./images/btn_favorite.png"></a> </td> </tr> </tbody> </table> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="./images/B.jpg" ></a></div> <div class="box_text"> <h2> 商品B</h2> </div> </div> <table width="100%"> <tbody> <tr> <td width="50%"> <a href="" class="etc_link"><img src="./images/btn_favorite.png"></a> </td> </tr> </tbody> </table> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="./images/C.jpg"></a></div> <div class="box_text"> <h2> 商品C</h2> </div> </div> <table width="100%"> <tbody> <tr> <td width="50%"> <a href="" class="etc_link"><img src="./images/btn_favorite.png"></a> </td> </tr> </tbody> </table> </body> </html>
ファイルの配置構造は、
images/ A.png B.jpg C.jpg btn_favorite.png jquery-1.11.3.min.js jquery.cookie.js image.html list.html
また、修正するにあたって、file://ではクッキー管理ができなかったため、
XAMPPを使用し、http://localhost/でやりました。
あと、クッキーの閲覧や削除操作を容易にするため、Chromeの拡張機能の「EditThisCookie」を利用しました。ものすごく便利なのでおすすめです。
さて、
- １.一覧表示について
なんとなくの実装はできていますが、未実装な箇所よりバグな箇所が多々ありました。
不明な変数faとか、ごみ（;` ）とか、imgを生成できていないとか、if文で=だったりとか。
そこら辺のバグを修正することで、自然と期待する対応になりました。
- 2.最新順について
これは期待値を満たせているかわかりませんが、
・list.htmlで登録の降順で出力するようにする。
・image.htmlでクリックしたものは、最後に来るようにする。
という対応を入れました。
投稿2015/10/20 20:52
編集2015/10/20 20:55
総合スコア1124
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/10/21 02:32
2015/10/21 02:35
2015/10/21 06:27
2015/10/21 06:29
2015/10/21 09:42 編集
2015/10/22 03:12
2015/10/22 04:17 編集