登録画面から一覧画面に最新順で並べることはできていますが削除ボタンで一番最新画像(一番上の)を削除すると画像は削除されますが一覧画面で一番下の画像が一番上に来てしまいます、なぜでしょうか?ご教授お願
いします。
登録画面コードは下記:
<!doctype html> <html lang="ja"> <head> <script src="./jquery-1.11.3.min.js"></script> <script src="./jquery.cookie.js"></script> <script> $(function () { $(document).ready( function(){ }); $('img[src="/btn_favorite.png"]').click(function () { var index = $('img[src="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() + '_' + './hontana/' + img.attr('src'); if ($.cookie('favorite') == null) { var p = []; p.push(data); $.cookie('favorite', JSON.stringify(p), {'expires':365, 'path': '/'}); } else { var book = JSON.parse($.cookie('favorite')); console.log(book); if (book.indexOf(data) == -1) { book.push(data); } $.cookie('favorite', JSON.stringify(book), {'expires':365, 'path': '/'}); } }); }); </script> </head> <body> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="images/3.jpg" ></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="/btn_favorite.png"></a> </td> </tr> </tbody> </table> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="images/2.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="btn_favorite.png"></a> </td> </tr> </tbody> </table> <div class="box_main"> <div class="photo"><a href="javascript:void(0);"><img src="images/1.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="/btn_favorite.png"></a> </td> </tr> </tbody> </table> </body> </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 book = $.cookie('favorite'); if (book == null) { $('#list').append('空空^^'); } else{ book = $.cookie('favorite'); book = JSON.parse(book); book.reverse();//これを追加しない場合は登録するときに最新画像が一番下に来てしまいます for (var i = 0; i < book.length; i++) { book[i] = book[i].substring(book[i].lastIndexOf('_0') + 2, book[i].length); var d = book[i].split('_'); $('#list').append($('<img src="' + d[1] + '"><button class="del">削除</button>')); }; } }); $(document).on('click', '.del', function() { var index = $('.del').index(this); alert('削除してもいいですか?'); var book = $.cookie('favorite'); if (book) { var book = JSON.parse(book); book.reverse();////これを追加しない場合は登録するときに最新画像が一番下に来てしまいます book.splice(index, 1); $.cookie('favorite', JSON.stringify(book), {'expires':365, 'path': '/'}); location.reload(true); } }); }); </script> </head> <body class="index" > <div id="list"> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/04/14 02:29