質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1345閲覧

javascriptでcookis保存して消すと順番が変わってしまうのはなぜでしょうか?

hyskyo

総合スコア79

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2016/04/06 05:21

編集2016/04/07 05:54

登録画面から一覧画面に最新順で並べることはできていますが削除ボタンで一番最新画像(一番上の)を削除すると画像は削除されますが一覧画面で一番下の画像が一番上に来てしまいます、なぜでしょうか?ご教授お願
いします。
登録画面コードは下記:

<!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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

登録画面で p.push(data); book.push(data); をしている箇所は、リストの「最後」に追加しています。
その状態で cookie に入れているため、取り出すときに逆順に並び替えないと最新が出ない状態です。

一覧画面で一番下の画像が一番上に来てしまいます

一覧画面で削除後に順番が変わる原因は、book.reverse(); をしたリストをそのまま cookie に入れているからです。
なので、cookie に入れる前に、もう一度順番を逆順(登録順)にすれば解決できると思います。

JavaScript

1if (book) { 2var book = JSON.parse(book); 3book.reverse(); 4book.splice(index, 1); 5book.reverse(); // もう一度順番を逆順(登録順)にする 6$.cookie('favorite', JSON.stringify(book), {'expires':365, 'path': '/'}); 7location.reload(true); 8}

また、p.push(data); の箇所を p.unshift(data); に換えると、リストの「先頭」に追加出来るため book.reverse(); をする必要が無くなると思います。
色々試してみてください。

投稿2016/04/13 15:01

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hyskyo

2016/04/14 02:29

ありがとうございます。 ご指摘通り試したらできました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問